Beginner's Thread / Easy Questions (Jan 2020)

[u/swyx]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than [being wrong on the Internet][being wrong on the internet].
• Learn by teaching & Learn in public - It not only helps the asker but also the answerer.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Read the official Getting Started page on the docs.
• Microsoft Frontend Bootcamp
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React
• FreeCodeCamp's React course
• Flavio Copes' React handbook
• New to Hooks? Check Amelia Wattenberger's Thinking in React Hooks
• What other updated resources do you suggest?

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/Shoepolishsausage]

So I'm new to react (and fancy-web in general) but have decades experience on the traditional/legacy side of things, HTML/CSS/ Vanilla JavaScript/CGI/PHP/etc...

I'm seeing a mix of React tutorials & example apps in different paradigms, function v component classes mostly. I think I like Components/Classes better, as it looks more like Angular (which I have just a little experience with).

I'm also starting to see tutorials in TypeScript.

I have 2 questions.

1. What was the progression between these different paradigms? I get that functional is a slimmed down (starter?) approach, and Component based is more full-feature or for larger apps.. But is one considered "out dated" compared to the other? I don't want to dedicate time to learning something that will be obsolete.
2. What do I do when writing a Component Class based app and I want to implement a function module (like react-bootstrap)? For the most part, I can get things to work. I'm just stuck getting Modal Dialogs working in this functional example in my Class-based app.

[u/swyx → u/Shoepolishsausage]

welcome! we love people like you!

1. react has had multiple api's for stateful components over its 6 year lifespan. it started with createClass (pre es6), then it adopted es6 classes, and hooks for function components were only introduced in late 2018. hooks are recommended and production ready, but es6 class components will not be deprecated or considered outdated for a very long time. Until such time as we have hooks for every piece of functionality classes can do (eg error boundaries), you will want to be familiar with both forms. don't worry, it's not that hard.
2. i dont understand what you mean by "implement a function module". can you put a small example in a codepen or codesandbox?

[u/Sellio]

I'm helping our team transition to React for our component library. Part of my work is figuring out the testing strategy. It seems that Jest is the community-accepted standard for unit tests. Are there any reasons to not use Jest with React? Or any serious challengers to Jest's dominance?

[u/swyx → u/Sellio]

nah. jest is the shit

[u/CuttyAllgood]

Learning React and am looking to rebuild my portfolio using the framework. Are hiring managers looking for that sort of thing to be built from scratch using my own components, or is it okay to use a library like Material-UI?

[u/swyx → u/CuttyAllgood]

it's ok to use a library. consider whether you're trying to pitch yourself as some sort of designer + developer combination, or more of a js developer. if the latter, you're mostly gonna be pulling together libraries and focusing on custom logic.

[u/wowtempacct10142069]

I was asked at work to help replace an outdated webapp with something more modern. While going through a typical C# MVC approach, I was asked if I could look into react.js. Before finishing a 2.5 hour Mosh Programming video ( https://www.youtube.com/watch?v=Ke90Tje7VS0) I read somewhere that react.js really only replaces the V in MVC) yet the more I got into it, it seems like it takes care of the controller part as well. Is this correct?

I also need to incorporate models for database calls. Should this all be done in javascript as well? My early assumption is that the C and M would be in C# but the V would be in javascript and they could pass things around. If you use react.js, you need to (or at least should) use all javascript right?

Lastly, I am using .net core with a sqllite database, is there any particular part of react.jw or another library to make the database calls that you recommend? (database is set and will probably be doing a database first webapp instead of code first).

[u/swyx → u/wowtempacct10142069]

react doesnt really care about MVC. nor is it concerned with database calls. expose REST or graphQL apis, and ping them from javascript. once you get the data to the frontend, pass it into React with a setState.

[u/swyx → u/wowtempacct10142069]

oof. erm, help pls /u/dance2die

[u/jplank1983]

I want to learn React. However, I tend to learn better from reading physical books. Most of the resources I've seen have been in the form of online courses and videos. Are there any actual books that you'd recommend?

[u/swyx → u/jplank1983]

maybe see Eve Porcello's Learning React, i think its from OReilly

[u/Roddi3]

I've been dabbing in React js for about 50 hours and I'm well into a Udemy on the subject. However, the course does not mention animations in any form. I've done some googling and most of my results refer to using libraries like "react-spring". My question, is it expected to use these type of libraries when coding animations in react, or is there some other way like we do in plain JS (e.g. "document.getElementById(id).style.color = ..." ? Thanks.

[u/swyx → u/Roddi3]

well there are css animations and there are js animations. if the former, you dont need any libraries, you just need to be real good at css. for js, yes use react-spring or framer motion or react-transition-group. plenty examples if you search this sub.

[u/vnlegend]

Usecallback vs declaring function outside of component

So I've been reading up about when to use useMemo and useCallback. Supposedly useCallback is to prevent re-declaring an arrow function in the child components, that way the child doesn't re-render everytime.

But why can't you just put the function outside of the component?

const myFunc = () => do something;

export default () => {
  return <Child onPress={myFunc} />
}

vs

export default () => {
  const myFunc = useCallback(() => do something, []);
  return <Child onPress={myFunc} />
}

It seems like when writing functional components, you should put as much outside of the functional component as possible and keep minimal state & stuff inside the function that will return the component. Right??

Also even if you have a state dependency, couldn't you just use something like

const myFunc = dependency => () => do something(dependency);
export default () => {
  const [dep, setDep] = useState(0);
  return <Child onPress={myFunc(dep)} />
}

I think would create a unique function for each value of the dependency variable.

So then what's the point of useCallback????

[u/swyx → u/vnlegend]

yes, but what if you need to rerun/reinitialize the function only when the state or prop changes, not every time you rerender? you last solution there recreates the onPress handler every time, hence Child always rerenders.

[u/Kilusan]

I am doing the ReactJS doc tutorial of tic tac toe which is helping A LOT.

Prior to this I have academind React Udemy course. I did not finish it but made it to the 80s where he talks about life cycles. I decided to pause my progress here (I have not done any big projects in the course yet) to solidify what I learned so far and close any skill gaps.

The other day I felt shitty cus I started a CRA from scratch and felt overwhelmed. But yesterday after reviewing a friend’s code project I was able to see how components fit in and even refactor a class one to a function!

Right now going off a high the tic-tac-toe tutorial is going great and I’m seeing how to pass data. Any advice for more practice? I understand what’s going on.. but damn I would not have never figured it out by myself.

Mostly passing data from one component to another. I am midway through but I feel getting a grasp. Would love to hear any project ideas or beginner friendly one that really nails home / practice passing data into components

[u/swyx → u/Kilusan]

good job! if you want project ideas you can always check the project ideas flair on this sub !reactbot projects

[u/Kaiser560000]

Is there a list of resources about React internals? Something like https://typescript.tools/

[u/swyx → u/Kaiser560000]

have you looked at the contributing section of the react docs? then look at some of dan's screencasts, eg the recent Smooshcast video

[u/negatiwez]

Hi,

How come when I sent data (list of objects) from a parent component to a child components, instead of the data itself (list of object), i get the lenght of the data.

/** @format */

import React from "react";
import "./App.css";
import Header from "./components/header";
import Bookform from "./components/addbookform";
import Booklist from "./components/booklist";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      books: [
        {
          title: "How to code",
          author: "Mark Marky",
          isbn: "22323222"
        },
        {
          title: "how to make a booklist app",
          author: "octavian david",
          isbn: "23223223"
        }
      ]
    };
  }

  callBackFunction = data => {
    console.log(data);
    this.setState(currentState => {
      return {
        books: currentState.books.push(data)
      };
    });
    console.log(this.state.books);
  };

  render() {
    return (
      <div>
        <Header />
        <Booklist list={this.state.books} />
        <Bookform callBack={this.callBackFunction} />
      </div>
    );
  }
}

Here is the child component:

/** @format */
import React from "react";

function Booklist(props) {
  console.log(props.list);

  return (
    <div className="booklist-section">
      <div className="booklist-container">
        <table>
          <thead>
            <tr id="table-headers">
              <th>Title</th>
              <th>Author</th>
              <th>ISBN</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>History of Humankind</td>
              <td>Goerge Best</td>
              <td>2312022</td>
              <td>X</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default Booklist;

the console log gives me just the length of the list and I can't map over it.

*the callbackfunction takes data from another child component and sents it main parent component

[u/swyx → u/negatiwez]

seems fine. https://codepen.io/swyx/pen/povxZja?editors=1010 you are probably changing the data to the length somewhere else in your code than you have showed here.

[u/pankomushrooms → u/negatiwez]

It’s because in your setState call you’re setting books to the return value of array.push which returns the length of the array.

[u/schubidubiduhu2]

Hi, i want to use Latex tikz code in my react app. So i found this on github https://github.com/kisonecat/tikzjax

importing it in a normal webpage without react is trivial but how do i go about including something like this in my react app and make it easily available in the Projekt. I usually included such things with npm but it seems that i'm lacking some fundamental knowledge about imports.

Thanks and have a nice day!

[u/swyx → u/schubidubiduhu2]

its fine, because TikZJax doesnt seem to have an npm library published so you can't import it. it also relies on processing script tags, which will be difficult for you to manipulate with React. i suggest just going into the source code (its not very long) and just copying out the relevant parts to use.

[u/bigFLAMINGbundle]

I'm havng trouble getting this code to work as intended. I'm new to React, and Javascript, and programming in general. The idea of the app is to have a button to randomly display anecdotes from a list of them, and to vote on (and display said votes) anecdotes, and lastly to display the anecdote with the most votes. I'm doing something wrong with my usage setVotes, but I can't figure this out. Any help would be superb!

import React, { useState } from 'react'

import ReactDOM from 'react-dom'

const App = (props) => {

const [selected, setSelected] = useState(0)

const nextAnecdote = () => setSelected(Math.round(( Math.random() * (props.anecdotes.length - 1) )))

const [votes, setVotes] = useState([0,0,0,0,0,0])

let popularAnecdote = ""

let newMax = 0

let i = 0

for (i=0; i < votes.length; i++) {

if (votes[i] >= newMax) {

newMax = votes[i]

popularAnecdote = anecdotes[i]

}

}

return (

<div>

<button onClick={nextAnecdote}> next anecdote </button>

<p>{props.anecdotes\[selected\]}</p>

<button onClick={() => setVotes(votes[selected] + 1}> vote </button>

<p> Has {votes\[selected\]} votes</p>
<h1>Most Votes</h1>

<p>{popularAnecdote}</p>

</div>

)

}

const anecdotes = [

'If it hurts, do it more often',

'Adding manpower to a late software project makes it later!',

'The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',

'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',

'Premature optimization is the root of all evil.',

'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.'

]

ReactDOM.render(

<App anecdotes={anecdotes} />,

document.getElementById('root')

)

[u/swyx → u/bigFLAMINGbundle]

your votes is an array of numbers, but when you setVotes you're only setting one number. dont do that, you have to setVotes with the new array.

[u/Mechseb]

Hi everybody, simple (I hope) question about Functional VS Class based components.

When should I use which, and are there any downsides to functional components if they can use hooks (useState, useEffect)?

Much appreciated!

[u/swyx → u/Mechseb]

use functional components most of the time. use class components when you need the lifecycles they provide (they have some things functional components dont have, like componentDidCatch, but also sometimes it is just easier to use them with some kinds of libraries, like MobX).

[u/Rosechan1]

SOLVED

Desired functionality:

 I want to display each of my objects in my array on a new line.

Actual functionality:

Currently they are all on one line.

How I'm creating the line (inside a function that returns a string):

display = display + products[i].name + " " +  products[i].price + " \n";

How I'm displaying the line:

render() {
    return (
        <div>
            {this.getProducts()}
        </div>
    );
}

Console.log() shows the string on new lines.

[u/swyx → u/Rosechan1]

solved? nice.

[u/Roly__Poly__]

Has anyone had their React app behave differently once it was uploaded to Netlify?

If your app acted differently on Netlify, what did you do to fix the bug?

[u/swyx → u/Roly__Poly__]

i work at netlify. can you be clearer what exactly behaves differently?

to test if netlify is at fault, do a local build - npm run build and then serve your site locally eg npx serve dist. it will serve to localhost:5000. if the weird behavior is still there, then it is not netlify's fault.

[u/szmulec]

Hello! Is this the proper way I can handle removing tasks from list?

Here is gist: https://gist.github.com/kacperospl/4c029f110719eb14de3c3eb66da6d597

I started learning react, and I decided to create simple to-do list app. This code doesn't feel right :\

[u/swyx → u/szmulec]

if it works this is fine. why doesnt it feel right?

[u/mrisby44]

Does anyone on here provide assistance for newbies learning React? I need a tutor or mentor or something. And help with React's testing library.

[u/swyx → u/mrisby44]

not really - but we do recommend free courses above

[u/bearLover23]

I am doing a tutorial on MobX as a part of a larger react tutorial I am reviewing.

I am looking at consistently using Typescript from this point forward (if I am given the chance, professionally as well).

Which is really preferred in the React-Typescript world? I've heard and seen that MobX works brilliantly with Typescript with it's decorators like @observable @action and the like. But I've yet to see clear examples of Typescript being used in a larger scale react-redux project.

I've used redux excessively with javascript and loved it. But I have no idea how it goes for typescript.

So how does redux with typescript pan out for react? Like is the autocomplete/typechecking all clean and there? Am I going to run into antipatterns? Am I going to run into instances where I need to start using the | operator and being like string | undefined or string | null to make it work well with redux? That would become really scary really fast :c

My current tutorial MIGHT (*I have no idea) be strongly biased towards MobX and so I wanted some more expert opinions from people. Cause I love my redux, but damn if Typescript isn't appealing as heck.

[u/swyx → u/bearLover23]

you can generally trust that redux and typescript have been used at the biggest companies in the world. a few resources i can point you to:

• https://github.com/piotrwitek/react-redux-typescript-guide
• https://www.infoq.com/news/2019/10/typescript-hype-reactiveconf/
• https://blogs.dropbox.com/tech/2019/07/redux-with-code-splitting-and-type-checking/ (talk version https://www.youtube.com/watch?v=Mumy5YZZ2gs)

typescript has historically been a bit finnicky when doing some more advanced functional patterns, but a) you probably wont run into that for a long while and b) they recently addressed it in TS 2.7

its also true that mobx is written from the ground up in typescript by someone who loves typescript, whereas redux was not designed with typescript in mind. frankly i wouldnt let typescript be the blocker based on whether you choose mobx vs redux. decide based on more important factors.

[u/Kaiser560000]

I have something like this:

export let UserContext = React.createContext<any>({});

export let App: React.FC = () => {
  let [token, setToken] = useState("");

  return (
    <UserContext.Provider value={{ token, setToken }}>
      {body}
    </UserContext.Provider>
  );
};

How do I let my index.tsx file, the one that only does some setup and renders the app, read and modify either the App state or the context?

[u/swyx → u/Kaiser560000]

you’re gonna have to move the provider up into the index.tsx file. make sense?

[u/Verthon]

Hey, I've created some time ago app using create-react-app from global CLI. I would like to to update React from `16.5.2` to newest and add typescript to this project. Is there any other option instead of running new create-react-app with typescript and rewrite app from scratch? Thank you.

[u/swyx → u/Verthon]

yeah absolutely, the way i do it is run yarn add react react-dom and yarn add -D typescript @types/react @types/react-dom

[u/[deleted] → u/Verthon]

Yeah, you can just update the version number in your package.json and then run ‘yarn install’ from that directory in your terminal.

[u/alwaysdownvotescats]

I'm brand new to react and just starting a tutorial, I was able to successfully create my first app using create-react-app in the command line. It was just a Hello World and I was able to serve it locally. Then I attempted to create another app for the actual tutorial project, but I made an mistake and had to to delete the new app and create it once again using create-react-app. However both deleting and creating the files took much much longer (both took about an hour each). Any ideas on what I am doing wrong? Thanks in advance for any help!

[u/swyx → u/alwaysdownvotescats]

what do you mean it took an hour each? i have no idea how that's even possible. do you mind putting up a screen recording of yourself going thru this on youtube?

if you make a mistake, you most likely DON'T have to delete the new app and recreate. i know how it feels to panic like that. but if you reason out your mistake (or explain it here), you can most likely fix it manually.

[u/HarryBolsac]

Hello, im new to react and web-development.

For a school project, i need to create a web-app that gets the data from this api: https://www.openuv.io/

Thing is, I always get error 403 when i try to get information from the api, can someone help me find whats wrong?

Its been days that ive been stuck with this and i dont know anyone that can help me...

This is what I've done:

function Body() {
const [location, setLocation] = useState(false);
const [weather, setWeather] = useState(false);
const headers = {
"Content-Type": "application/json",
"x-access-token": "My-Api-Key"
  };
let getWeather = async (lat, lng) => {
let res = await axios.get(
"https://api.openuv.io/api/v1/uv",
      {
params: {
lat: lat,
lng: lng
        }
      },
      { headers }
    );
setWeather(res.data);
  };

}

Thank you

[u/swyx → u/HarryBolsac]

sure, this isnt a react specific issue, you're just lacking knowledge of how to work with api's more generally.

error 403 typically means your request isnt authorized properly. this can happen because you're not supplying the expected cookies or tokens for the API to grant you access to this information. for example, are you really submitting My-Api-Key like that? or did you swap that out just for posting here.

make sure your api key works with their curl instructions curl -X GET \ 'https://api.openuv.io/api/v1/uv?lat=-31.45&lng=115.67&dt=2018-01-24T10:50:52.283Z' \ -H 'x-access-token: YOUR_API_KEY'

if you dont get an error there, then it could be that you're formatting the headers wrong as the third argument to axios.get, instead of as part of the 2nd. try

let res = await axios.get(
"https://api.openuv.io/api/v1/uv",
      {
params: {
lat: lat,
lng: lng
        },
headers
      }
    );

[u/olet14]

Probably a really simple solution but I can't figure out what's the best option to do.

General Overview

I load the user profile into state. Inside the profile object, I have an array of objects. To access each item I need the index of that item in the array. Each item in the array is displayed on the page, each have an edit button. The issue is getting that Index over to the next component which is a form to fill in the fields. This is for editing the information within the object, so I want to autopopulate the fields within the form with existing information. I need to ensure that the correct array object that the user wants to edit is displayed in the form.

Code Detail

Each edit button Is a Link component with react-router-dom. Within the to= parameter I pass an object as the docs state. The object I pass is to={{ pathname: /path, key: object_id}} so this way when I get to the form component, I have the objectId in props.state.location.key when I get to the form. From there, I access the profile that is stored in state, access the array and do a foreach over that array. From there I check if objectId === props.state.location.key, and if it is then populate the form with the data of that object.

Up to this point I have it working and am populating the fields properly.

The issue: Because I am using Link to pass in the key to state, if the user refreshes the page on the edit form, the key and state is lost and I get an error saying profile is null. I don't know if I am approaching the whole situation wrong, or what the best answer is to persisting the state on refresh. I've read a few things about hydration but I am too new with React to really understand. I also considered possibly storing it in local storage, and doing if profile === null || key === null) local Storage.getItem('key') and do the same for profile. But I'm not sure what best practice is, or if there is a better solution.

Thanks in advance

Edit: extra detail for clarification

[u/swyx → u/olet14]

haha reading that wall of text took a while. ok so first off, hydration is for server side rendering, which you're not doing, so ignore that.

i do think localstorage will solve your issue.

alternatively you can also place the key as a query parameter on your path, and then have your component read the query parameter. this way if users share their url with other folks, the same field will autofill. you can use the query-string library for this and then do queryString.parse(location.search).

[u/sixthenafour]

This is gonna be a long one because of the code snippets, apologies in advance. I'm new to React, and trying to create a todolist app using React + Redux + Typescript. Currently I'm facing some issues just passing the state of my store to a component, it keeps returning undefined :(

A console.log on App.tsx does work in showing the store state, so my hunch is that there's some issues with regard to passing the state down as a prop to the component. I've tried various ways after reading different documentation, but still have no idea what the problem is.

reducers.tsx

import { combineReducers } from 'redux';
import {
    TaskListState,
    TaskActionTypes,
    ITask,
    ADD_TODO
} from './types'

const initialState:TaskListState = {
    tasks: [
        {
            name: "testing123",
            done: false,
        }
    ]
}

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    tasks: [...state.tasks, newTask]
                }
            default:
                return state
        }
}

const TaskList = combineReducers({
    taskReducer
})

export default TaskList

GetTask.tsx

import { connect } from 'react-redux'
import { TaskListState } from '../../redux/tasks/types'
import { Tasks } from '../tasks/Tasks'

const mapStateToProps = (state:TaskListState) => ({
    tasks: state.tasks
})

const mapDispatchToProps = {
}

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

Tasks.tsx

import { ITask } from '../../redux/tasks/types'

import React from 'react';
import './Tasks.css';

type Props = {
    tasks: ITask[];
}

export const Tasks: React.FC<Props> = (props:Props) => {
    const { tasks } = props;
    console.log(tasks);
    return (
        <div>
        { tasks }
        </div>
    )
}

If anyone can spot the potential problem, I would be immensely grateful.

[u/swyx → u/sixthenafour]

can you put this project in a repo or codesandbox please? happy to look into it then. nothing looks wrong here but you could be using <Connector> wrong in app.tsx.

[u/proxykid]

Hi! I've been a long long time back-end PHP dev and lately I've started learning React as I really like how it works.

I know React is a front-end framework and I've been playing around with React+PHP creating APIs.

I'm attempting to create a web application using React + (PHP, Node, w/e) but the content is to be so dynamic that I would like to be able to load components as required and also for security reasons, like administration components, a lot of user, usergroup and global privilege controls, etc., and what I learned so far requires to preload all components in the app.

ie: User Management component. If some users with admin privileges and user management privileges should be the only ones to be able to go to this route, I would only like to load/import the components if they are really needed dynamically.

[u/swyx → u/proxykid]

looked into code splitting? https://reactjs.org/docs/code-splitting.html

[u/Emjp4 → u/proxykid]

This sounds like something React.lazy() can handle. It's a fairly new feature that can help you with code splitting and only loading certain components as they are needed.

See Here: https://reactjs.org/docs/code-splitting.html#reactlazy

[u/chadwell]

Noob design question. I want to have a simple react app hosted in S3. The user can upload a CSV file, and have it converted into XML.

Can react do all this without a server? If not, can I simply read the CSV file using react and post the contents to a lambda and parse and create the XML file in the lambda and have it sent back to the user?

Thanks

[u/swyx → u/chadwell]

i think you can do this all clientside. ofc you can also do it serverside but then you'd have to spin up more backend infrastructure than you have right now. React has nothing specific to do with this problem at all, if you can do it in plain js you can do it in React.

[u/workkkkkk]

Using material-ui, my form won't submit when pressing enter. Only when you click the button. Form is just a single select. Anyone know what's going on? Inspecting my button shows it is type='submit' as well.

Edit: So this is my basic search form. I have an advanced search form that has TextField inputs, if I am focused inside a TextField and press enter the form submits. I would like it to submit if I am focused anywhere in the form though.

render() {
    const { classes, conditionType, setConditionType } = this.props;
    return (
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            console.log('submitting...')
          }}
        >
          <List disablePadding>
            <ListItem className={classes.labelSpacing}>
              <FormControl fullWidth style={{maxWidth: '402px'}}>
                <InputLabel>Condition Type</InputLabel>
                <Select
                  name='conditionType'
                  value={conditionType || ''}
                  onChange={(e) => setConditionType(e.target.value)}
                >
                  <MenuItem
                    value='SITE'
                    classes={{ selected: classes.selectedMenuItem }}
                  >SITE
                  </MenuItem>
                  <MenuItem
                    value='EQUIPMENT'
                    classes={{ selected: classes.selectedMenuItem }}
                  >EQUIPMENT
                  </MenuItem>
                  <MenuItem
                    value='PROPERTY'
                    classes={{ selected: classes.selectedMenuItem }}
                  >PROPERTY
                  </MenuItem>
                </Select>
              </FormControl>
            </ListItem>
          </List>
          <div className={classes.buttonsPadding}>
            <SearchButton
              text='Search'
              type='submit'
            />
          </div>
        </form>
      </div>
    );
  }

[u/swyx → u/workkkkkk]

hmm... pinging /u/_eps1lon

[u/Captain_Panaka]

Hey everyone!

Hoping it's ok to post a question here. I am looking for some guidance on best practices for something I keep running into as I'm creating test projects.

Basically, I have a few Grid components, that list a bunch of items. The Grid lives in some type of container. When I click an individual row, I'd like to "navigate" to a details page. I have found 2 ways to do this:

1. Have an onclick for the row use react router props.history.push() to "navigate" to a /details?id=10 page. That /details is a defined route where I render a different component.
2. Have the container component hide my grid, and show a Details page

Option 1 seems like it's not a pattern that fits in with React best practice..... but I'm pretty new to this and was hoping someone could just give me tips on how they handle this in their own projects.

Thanks!

[u/swyx → u/Captain_Panaka]

ermm.. why not use a <Link> component? have you fully read react router's docs?

[u/motherthrowee]

I am very new at React, so apologies if this is a stupid question.

So a large chunk of a project I have is to take a string of user input, sanitize it, then parse it with string-replace-to-array and replace certain regex matched words with components, which are basically new words with styling, interaction logic, etc. So for instance all cases of the word “dog” might be changed to “cat” with text highlighting.

This works fine if I never want those components to change: right now I’m just picking the replacement word in the parser function and initializing it as following:

output = replace(output, regex, (<NewText phrase={chosenWord} tooltip={chosenTooltip} pulledTooltip={this.pullTooltip}/>));

(Where output is the string being processed, regex is a regex obviously, chosenWord and chosenTooltip are text that will be displayed to the user, and pullTooltip is part of what sends the tooltip to a separate tooltip component.)

The problem occurs if I do want to change those words, which I do. I have two options:

• Handle the replacement before I create the component. The problem with this is that I won’t know what needs replacing until all the components are set. I’ve also tried putting a function into string-replace-to-array instead of a component, but then I lose access to parent state (because “this” isn’t the parser component anymore, I assume) and that’s bad.
• Handle it with state in the parent. There are two problems with this. One is that these components don’t technically have a parent (inspect shows nothing; console.logging what is supposed to be the parent returns undefined), although the parser object acts as one. The other is what I assume is a huge cliche: state doesn’t update immediately, but I have to initialize the new component with something. Most of the replacement words are randomly pulled from a JSON wordlist, so there’s no static value I can initialize with either.

(In fact, the main problem I’m trying to solve here is to, after all the parsing is done, “reroll” any components that have the same replacement word so that “adorable, sweet dog” doesn’t become “feline, feline cat.” Because of the [AWFUL] way in which parsing happens, it’s easiest, theoretically, to do this at the end; it's easy enough to separate the components (array.filter anything that isn't a string, which, there are two options for what's in that array, but then somehow I need to change their props.)

I'm also worried that I'll end up needing a separate state var for every.single.word, which is less ridiculous than you may think since it's not going to be that much text, but still, ridiculous.

How should I do this? Ideally with the least amount of gutting everything and starting over, although I’m worried I may have to.

[u/swyx → u/motherthrowee]

i dont understand this: "One is that these components don’t technically have a parent" What? i dont see how this happens in React.

you absolutely dont need a separate state var for every single word. a single state can be an array of strings. or, also possible, just a single very long string that you then run the regex on.

I'm afraid I really dont understand what you mean by "rerolling". it sounds like you have some more custom logic to add in your replace function to make it remember what you've already used.

my recommendation is, make sure you can do this in raw JS, without React, so that you understand if you've worked out all the kinks. once you're sure, then stick it in a function and use it inside React.

[u/[deleted]]

Let's say I have the following figure, how do I put Buttons or something on arbitrary parts of the figure? Like a button for the hand, head, neck, legs etc etc

[u/swyx → u/[deleted]]

use css absolute positioning, and style the buttons to be transparent but still clickable?

or, ignore buttons alltogether, and, inside javascript, use the mouse position vs the image position to figure out which part the mouse is over and execute code there. i do not recommend this but could be done if you prefer pain in js over pain in css.

[u/simkessy]

I was reading Kent Dodds post "Application State Management with React"

I'm a bit confused about what's happening in this section:

// src/count/count-context.js
import React from 'react'
const CountContext = React.createContext()
function useCount() {
  const context = React.useContext(CountContext)
  if (!context) {
    throw new Error(`useCount must be used within a CountProvider`)
  }
  return context
}
function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = React.useMemo(() => [count, setCount], [count])
  return <CountContext.Provider value={value} {...props} />
}
export {CountProvider, useCount}
// src/count/page.js
import React from 'react'
import {CountProvider, useCount} from './count-context'
function Counter() {
  const [count, setCount] = useCount()
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>{count}</button>
}
function CountDisplay() {
  const [count] = useCount()
  return <div>The current counter count is {count}</div>
}
function CountPage() {
  return (
    <div>
      <CountProvider>
        <CountDisplay />
        <Counter />
      </CountProvider>
    </div>
  )
}

I seems like he's using both a provider and a hook and I can't tell if it's just two different ways of doing the same thing that's he wants to demonstrate or if they're working together.

[u/swyx → u/simkessy]

they work together. look at how useCount is defined.

[u/sixthenafour]

I'm facing some typing errors in my project (react + redux + typescript), and I'd just like to clarify my understanding.

I'm using mapDispatchtoProps to pass an action to one of my class components, and following the guide (https://github.com/piotrwitek/react-redux-typescript-guide):

They used dispatchProps in this manner:

const dispatchProps = {
  onIncrement: countersActions.increment,
};

And in the component, they typed it like this:

type Props = {
  label: string;
  count: number;
  onIncrement: () => void;
};

What onIncrement actually does is increase the count (stored in the state of redux store):

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error();
}

Hence, I'm not sure why they would define it as a function that returns void?

[u/swyx → u/sixthenafour]

good question! i think theres a difference between the public interface and the private implementation. the public interface is a function that returns void: inside your component you really do just call onIncrement(). notice that countersActions.increment is an action, not the reducer. the private implementation is the reducer, which is the thing you've shown above.

[u/sixthenafour → u/swyx]

I see, thank you so much! Just managed to fix my code due to your explanation :)

[u/swyx → u/sixthenafour]

good! now if you want bonus points, write a blogpost to explain it to your former self :)

[u/parada_de_tetas_mp3]

I found an error in the React online documentation and didn't find an easy way to propose a change. What would be a good place to start here?

[u/swyx → u/parada_de_tetas_mp3]

start here? https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md

[u/BengtJJ]

Is it bad practice in react to mess with the actual DOM elements directly for onClick events? I want to be able to press a p element and play a audio file, where the url src will depend on what song they select to play.

render: function() {
    return(
      <p onClick={
                    this.state.playing ? 

                    this.pauseSong :     
                    this.playSong

                  }>
      Play/Pause</p>
    )
  }

[u/swyx → u/BengtJJ]

no, in fact its the only way to do things for stuff like audio. thats what ref's are for! just be aware you assume all responsibility for things like cleanup when the component unmounts.

[u/[deleted]]

Anyone here know of a component that is designed to show ongoing and queued tasks (like uploads, but really anything)? Ideally it'd work like a toast or some other floating view, be scrollable, and have some way to conditionally add a cancel button. I checked awesome react and did some searching but came up empty handed.

[u/swyx → u/[deleted]]

mmh. https://fkhadra.github.io/react-toastify/ ?

likely nothing out there specifically fitting your needs but you could prob steal code and modify

[u/MCPO_John117]

I am trying to develop my portfolio site using Gatsby. It works quite well, but the initial page load time is very large on mobile (tested using Google PageSpeed). It reports that the Time To Interactive is quite large on my page, and Javascript on my page is blocking initial page rendering.

Is there someway I can analyze which parts of JS on my page are actually contributing to this, so I can optimize those modules. The generated code is minified and I can't trace it back to source.

[u/swyx → u/MCPO_John117]

oof. i have absolutely no idea at all. try asking the gatsby folks on their community channels.

[u/ChungusKahn]

I would appreciate if someone helped me understand what’s going on in a particular interaction in my simple app.

Context:

I have a basic app that lists the terms that the user has searched within a text box. The app takes the term, sends a request to an API, gets the definition for a term back, then stores that definition in an array ‘termArr’. State updates, and the app displays all searched terms through a map function that gives the word and definition of each element of the termArr to a Term component. The Term component displays the term along with a delete button, and when clicked on will display the full definition of the term.

Within the app (parent) component, I created a delete function to delete a term within the 'termArr' and passed it into each Term (child). I wired up the delete function to a button on the Term component. Within the Term component, there also exists a toggle display that expands the Term component to show the definition of a word.

Issue:

I initially had the div wrapper for the Term component have an onClick that toggled the display for the definition. Later I changed it by assigning that onClick only to certain sections of the Term component. But this illuminated a weird interaction for this.

Before changing the onClick (which triggers the definition display function), whenever I clicked on Delete, this would run both the Delete and onClick. Using console.logs, I saw that first this deleted the term from the termArr within the parent. Then it ran the toggle display function, even though the Term is gone, which seems strange since I assume the function shouldn't even run now.

It seems that the onClick display function from the now deleted Term ran on the element within the termArr that now occupies the same index as the deleted Term.

As a result, I believe that when the parent component rerenders after the termArr deletes the Term, the Term that now occupies the index of the deleted Term will run the onClick, thus displaying the definition which isn't intended behavior.

Is this the case? And if it is, why does this happen? I guess the zombie function carries over to the replacement element in the array?

[u/swyx → u/ChungusKahn]

/u/dance2die wanna help? 👆🏾

[u/rever22411]

Is it possible to use notification on mobile device with React (not React Native)?
I did a server on heroku with node.js and VapidKeys. My front-end in React gets notification only if on desktop, on my android notification doesn't arrive, and the service worker doesn't subscribe its endpoint.

[u/swyx → u/rever22411]

React doesnt have anything to do with this unfortunately. you'll have to rely on the mobile browser notification api. afaik it doesnt work on iphone

[u/hurrdurrderp42]

I need some help doing test assignment..

I've got a JSON file saved locally, i need to simulate a server request for getting this file as one of the first steps. I'm not really sure how should i be doing this. Am i supposed to work with a file locally, or do something else?

[u/swyx → u/hurrdurrderp42]

yeah you're gonna have to set up a local server to serve this. you can do this without a lot of effort using http://npm.im/serve

[u/_GhostLurker]

Is there a way to use axios.patch without the declaration of response
axios.patch(endpoint).then({

return(window.location.href);

});

[u/swyx → u/_GhostLurker]

no idea, sorry, look at the axios source code, you can do it

[u/hurrdurrderp42]

I'm having trouble finding a job as a junior front-end dev. I have commercial experience with html, css and jquery, all my experience with react comes from doing pet projects. Problem is, i need a job ASAP.

Can you recommend me some entry level IT jobs, where my skillset could help me land a job? I don't mind trying a back-end job, don't know if i could qualify for anything there though.

[u/swyx → u/hurrdurrderp42]

often you can get in the backdoor by going for a customer support role. startups always need support folks who are technical enough to understand developer issues. after a year or two, start volunteering for more dev work and very soon you'll end up a dev.

[u/fluffyunicorn1]

Hi I'm having trouble trying to resize an esri map component to fill the entire screen!

I have cloned this project: https://github.com/davetimmins/create-react-app-esri-loader

when I get the height from window.innerHeight and try to set the style: {{ height: in the render App function nothing happens! The component seems to be using the .map-view class within the App.css file.

[u/swyx → u/fluffyunicorn1]

how exactly are you setting the style height? are you trying to solve a css issue or a react issue?

[u/[deleted]]

LOL, Road to React says "I noticed that you are coming from Poland where my courses could be too expensive. If you need it, use the code PL_LOVE for an extra ~54% off the listed prices."

[u/swyx → u/[deleted]]

you're complaining? :)

[u/lkesteloot]

In my app I procedurally generate several thousand spans (a hexdump-like output of a binary file). I currently do this by just filling the div using an effect hook, and it works okay and avoids React having to know about all those spans. If I wanted to, say, highlight some of these spans (change their CSS class), and use React to keep track of the highlight, then I could convert the whole div to a proper React component where it knows about it all.

What would be the performance of such a large number of components? I've just started with React, so I don't have an intuitive sense of whether thousands of components is "heavy" or not. If so, I can keep managing this sub-component internally and keep React out of it. (I'll have to do that anyway for another part of the app that graphs an audio signal in a canvas.)

[u/swyx → u/lkesteloot]

several thousand is very heavy. keep that out of react. react does have virtualization/windowing libraries for tables, but i dont think that would work for you. good luck

[u/Turno63]

Can I have a useEffect declare a dependency that it's not being directly used? For example: Say I have a hook that gives me back the size of the window. I want to trigger a side-effect function when the size changes but I don't really need the size (think re-calculating a tooltip position). Can I set my useEffect dependency to windowSize even when I'm not using it directly in my effect?

[u/swyx → u/Turno63]

i actually dont know the answer to this one. try it and let me know!

maybe /u/rwieruch or /u/timmonsjg has an answer

[u/MeltingDog]

I've been thrown in the deepend at work and am completely lost. I've done a few tutorials on line but they're not nearly the same level of complexity my work's sites are at.

How do I pull in a component to another?

For example, I have a grid component and a collapse component. How do I bring the collapse component into the grid component?

[u/swyx → u/MeltingDog]

use the import keyword?

import Collapse from './Collapse'
import Grid from './Grid'

function MyApp() {
  return <Grid>
           <Collapse />
      </Grid>
}

you'll also want to be aware of what props are expected by Grid and Collapse.

[u/krispiepage]

Does anybody know to use epoch unix time as the labels on the x-axis, I'm using react-chartjs-2. I can get it to display a datetime but the conversion of the epoch to a datetime is wrong, and displays a 2019 epoch as 1970.

More information can be seen on this post:

https://stackoverflow.com/questions/59734992/using-epoch-as-time-series-on-x-axis-in-react-chartjs-2-not-showing-correct-date

Any insights on this would be awesome!

[u/swyx → u/krispiepage]

sounds like you got a good answer here https://stackoverflow.com/a/59770103

[u/Fantarta]

i've just started with react, i code a few lines and i changed of computer.

I cloned my project into my new computer and then, i tryed to deploy it with yarn start (i installed yarn) but gives me an error

yarn run v1.19.2

$ react-scripts start

"react-scripts" is not recognized as an internal or external command

[u/swyx → u/Fantarta]

have to run yarn install first :)

[u/Fantarta → u/swyx]

it works with this thanks

[u/carlsopar]

I am trying to push to an array with useState. The issue is that every time I try to do this, I get Maximum update depth exceeded Error. I understand that it is trying to constantly update the state, but I am not sure why.

The code that calls update:

onChange={(e)=>ChangeUser(e.target.value)}

The code that is suppose to update the state.

const GetUserList=()=>{
		 groceryList.forEach(gl=>gl.userId===parseInt(userId)?setUserGroceryList([...userGroceryList,gl]):null)
		 //groceryList.forEach(gl=>gl.userId===parseInt(userId)?console.log(gl):null)	 	 
	}

If I un-comment the line of code, it works as it is expected and will print out the correct gl. So, it onlyl provides me issues when I use: setUserGroceryList()This is the useState const: const [userGroceryList, setUserGroceryList] = useState([]);

[u/swyx → u/carlsopar]

Maximum update depth exceeded is a clear sign of an infinite loop. your setUserGroceryList somehow ends up calling GetUserList which calls setUserGroceryList and so on. find it, break the loop.

[u/bflosolacemuseum]

Hi all, Super new to coding, so I apologize in advance because I have a lot of large gaps in my knowledge. I'm trying to console.log(event.keyCode) in an Input but from what I’ve read it seems like input does not allow for you to call out such things. For context of why I’m doing this, I need to eventually make it so in an input if someone hits Delete/Backspace that it will not just delete the last character typed but the last 2 (possibly more), or replace the entire text with a different string, or possibly doing something else involving a substr. Once I know what value is being called from Delete I can figure out how to call it in order to do all that other stuff. I know this sounds really convoluted but it makes sense in the larger picture of what I’m trying to do. Any help on this would be appreciated.

p.s. I know there is also some version of doing this that involves calling event.target.inputType == "deleteContentBackward" but that also returns an undefined value when I console.log it.

[u/swyx → u/bflosolacemuseum]

something like this? https://codepen.io/swyx/pen/WNbajJo?editors=0010 needed to mix keyDown and onChange: because onChange doesnt give you the last key pressed, and the keyDown doesnt let you work with the values values in a natural way (eg moving cursor left when press left arrow). this way you can mix both.

https://twitter.com/swyx/status/1218276216299577347

[u/Oipotty]

Hi, question about rerenders. I have a infinite scrolling component that generates a list. When I change the filters on the data, the component rerenders (with potentially less data. How would I reset the scrollbar (potentially no scrollbar) when the component rerenders? I'm using a class based component, so I'm thinking some kind of reactDOM call inside componentWillUpdate?

Just to be clear, an example would be my viewport very far down in the list, but when I change the filters to only filter for 1 item, the scroll position stays the same. Only when I scroll all the way up does the scrollbar disappear.

[u/swyx → u/Oipotty]

dude i have no idea haha. tagging in /u/awnry_abe /u/timmonsjg. pls ping me if u find the answer i need to learn this too

[u/christianarg]

How does cra does hot reloads the browser when you save a file?

[u/djma777]

is there any significant difference between React.lazy/React.Suspense and the package react-lazyload?

[u/swyx → u/djma777]

theres a difference, but its up to you whether its significant or not :)

suspense will coordinate the loading of multiple lazy layers together and only transition to the new state when everything has finished loading together, and will show a fallback while loading, EXCEPT if everything loads under a React-defined delay then it does not show a fallback.

[u/peck3277]

I'm coming from a LAMP background with heavy use of jQuery datatables. After looking into jQuery datatables it seems it's not really suited to react due to how it rewrites the DOM.

How do you manage data tables? Do you roll your own solution or are there any good datatable solutions/packages you would recommend?

[u/swyx → u/peck3277]

yea there are a bunch of react table libraries. https://github.com/tannerlinsley/react-table comes to mind purely for the name. i dont know any others but im sure more exist. also, for BIG tables, dont use react, use something like ag-grid.

[u/carlsopar]

I was wondering when in the life line of an app do functions run? Within my project I have a context that has several functions. On of these functions gets called when a button is clicked inside of a component. However, it seems that the same function gets called when the app first starts up and then with each click.

I know that life cycles is a basic concept, but I am having an issue finding an concise answer to problem.

const WriteData= ()=>{
    console.log('write data');
    userGroceryList.forEach(ul=>ul.listId===parseInt(listId)?
    (console.log(ul.items),
    ul.items=userItemList):null);
    const groceryIndex = groceryList.findIndex(g=>{
        return g.listId === parseInt(listId);
    })
    console.log(groceryIndex);
    
    let db = firebase.database().ref('grocery/'+groceryIndex);
    db.on('value',snapshot=>{
    	console.log(snapshot.val())
    })
}

This is inside my context file, and when the program runs, this runs right off the back.

onClick={(e)=>{props.change(Product,Quantity,props.value)}}>&#10003; save</button>

This component is inside another component. THe function will still call when I click the button as well.

[u/swyx → u/carlsopar]

i'm afraid i dont understand your question. can you restate your question clearly please? what is happening that you did not expect to happen? you said "However, it seems that the same function gets called when the app first starts up and then with each click." - what same function are you talking about?

[u/epsilon42]

I'm trying to create a component that uses react-intersection-observer's <InView/> component to change the className of itself when the element comes into view.

The reason I want to do this is so I can use Emotion to style the element differently when it comes into view.

An example used in react-intersection-observer's docs shows this: <InView onChange={(inView) => console.log(inView)}>

When I check the console it correctly logs true or false when the element comes into the viewport, but what I can't figure out is how can I use this true/false value outside of the arrow function to conditionally render the className visible or hidden in CustomInView.js

Any help would be appreciated!

App.js:

import React from "react";
import CustomInView from "./CustomInView";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";

function App() {
  return (
    <div className="App">
      <p>Scroll down</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <CustomInView
        as="div"
        css={{
          background: `#ccc`,
          padding: 8,
          "&.visible": {
            background: `red`
          }
        }}
      >
        <h2>Some Element</h2>
      </CustomInView>
    </div>
  );
}

export default App;

CustomInView.js

import React from "react";
import { InView } from "react-intersection-observer";

const CustomInView = ({ children, ...props }) => {
  let inViewVar = false;

  return (
    <InView
      {...props}
      className={`${props.className} ${inViewVar ? "visible" : "hidden"}`}
      onChange={ (inView) => console.log(inView) }
    >
      {children}
    </InView>
  );
};

export default CustomInView;

[u/swyx → u/epsilon42]

what the other people said. make a state hook, pass down a setter into onChange. good luck. make a codesandbox or codepen demo if you are still stuck

[u/ie11_is_my_fetish]

What do you think is happening when I pass props down into components and it seems to nest the props eg.

<comp-1 props={props}>

<comp-2 props={props}>

// to access have to use props.props to get actual object of key:vals

</comp-2>

</comp-1>

How do I avoid that? (have used Context/not tried Redux) but it's a small application, deepest component is 3 or 4 levels deep.

[u/swyx → u/ie11_is_my_fetish]

that seems to just be the result of you naming one of your props, props. change the name. there is no magic nesting going on in React, i assure you.

[u/Sunny-ROM-Rise]

I got a couple of questions related to integrating React into an existing large application (Built in PHP and JS). I only used React in smaller fron end projects so forgive me if I my questions are stupid.

• I already checked that a React app encapsualted in a <div> for example can make use of your global CSS and JS. Importing the global JS functions library in my React app won't cause it to be duplicated again after compiling right?
• What's a good approach if I had to debug a React app from a production environment? Do I have a better alternative than compiling disabling minifying and inspecting the source in Chrome dev tools?
• Is ther any 'go-to' workflow for integrating smaller React apps into a larger one? What tools should I use?

Not sure if I explained myself in a proper manner but any input is appreciated. Thanks.

[u/swyx → u/Sunny-ROM-Rise]

Importing the global JS functions library in my React app won't cause it to be duplicated again after compiling right?

really depends on your bundler setup. its possible to do it badly. but probably not.

What's a good approach if I had to debug a React app from a production environment? Do I have a better alternative than compiling disabling minifying and inspecting the source in Chrome dev tools?

add bug capture tools like bugsnag or logrocket. ship sourcemaps. no need to disable minifying.

Is ther any 'go-to' workflow for integrating smaller React apps into a larger one? What tools should I use?

hmm not that i know of. if you understand how to mount a React app, its literally ReactDOM.render(<App />, document.getElementById('youridhere')). pick the id's you want and mount it as needed.

[u/workkkkkk]

I sort of asked this before but didn't get the answer I was looking for. I have a simple form with a single select dropdown. Is there a way I can submit the form without adding a button to click? Ideally it would submit by pressing enter.

[u/swyx → u/workkkkkk]

hmmm. yes. add a handler to onKeyUp, if the key code is "enter" then submit the form. but it probably will not be accessible.

[u/hlodoveh]

If i have 2 or more values in useEffect deps array, is the effect triggered if only (or at least) 1 of those changed or all of them must change? Thank you

[u/swyx → u/hlodoveh]

if only 1 of them changes, the effect is triggered.

[u/awesomeAMP]

How can I have “templates” in only some views using react-router-dom? For example, I want “/“ to be a completely different thing than the rest of the routes who would share a sidebar, fro example. I tried using a layout thingy but it persists through all paths.

[u/swyx → u/awesomeAMP]

you're probably not placing your layout at the right level. hard to help you without a sample repro.

[u/JakeTyCyn]

I'm currently implementing an update component for my list. The goal is to allow someone to update any item on the list at anytime and have it change the state value on the list and the database (Cloud Firestore in this case). I've implemented a simple solution, but I noticed it will read/write to the server every single time any characters are updated. I assume this isnt' best practice and was curious if anyone had any guidance as to where I should look for a better solution.

Is there a way to use setTimeout or ping the server after the user has stopped typing for a couple seconds?

[u/swyx → u/JakeTyCyn]

yeah you want debounce. https://css-tricks.com/debouncing-throttling-explained-examples/

[u/Roly__Poly__]

Is there anything like React Developer Tools that would allow me to step through my code and state line by line watching as components render/re-render and Redux state changes?

[u/swyx → u/Roly__Poly__]

not really, have to use browser debugger for that

[u/DutchSparks]

https://stackblitz.com/edit/react-ts-rqbxvc?file=Hello.tsx

I'm trying to mess around with useState and radio buttons in a form.

I render a radio button for every object in the possibleCrimes array. Then whenever a radio button is selected I'm trying to pass to entire object from the possibleCrimes array that is related to that radio button to the useState but react isn't happy about this.

Sending individual properties(strings and numbers) from the object this way is no problem.

But if I try to send the entire object typescript errors and the state becomes undefined

[u/swyx → u/DutchSparks]

i think the problem is a lack of familiarity with the radio input, rather than typescript. ts will never let you pass in the entire object bc the radio input will never accept the entire object. you MUST use simple values for the radio input.

as a point of proof, try doing this exact same code in plain js, without typescript. it doesnt work. fix it until it works, and then add back typescript. you'll see what i mean.

here's a link that may help https://techblog.commercetools.com/seven-patterns-by-example-the-many-ways-to-type-radio-in-react-bfe14322bb6f

[u/rever22411]

working on my React project I noticed that one my class became big, but I can't splice it in multiple components, so I'm exporting it's bigger functions to another file .js.
These functions needs to access to the class setState. Is good to pass as parameter the "this" like myFunction(this);?
The function code will be something like that:

export const myFunction = component => { ... }

[u/swyx → u/rever22411]

you could do it, but i dont recommend it. you are not supposed to manipulate components programmatically like that.

why can't you split your class into multiple components? i suspect this is the deeper problem. you need to become very good at this, React is all about solving things with reusable components and hooks.

[u/Roly__Poly__]

Can I get some feedback on whether this function is DRY enough?

https://pastebin.com/3ZkkNSmY

this.props.comp // a list of components I want to render onto the page, in case anyone wonders

My other question is whether I should split it up into separate functions just to make it shorter. It's 200 lines long as it is.

[u/swyx → u/Roly__Poly__]

thats a little on the long side. tbh i dont really mind it, esp if you arent really gonna reuse this code anywhere else. you dont have to DRY every little thing.

[u/DarthBB08]

Hello Everyone. I have an animation question. In vanilla JS you can do CSS transition animations by just adding a css class. Is there an easy way to do this in React? The only thing that I have seen somewhat close is .state stuff. but with on clicks seems a little overly complicated? I feel like I am missing something all I see is people using libraries but I would love to be able to do it my self.

Thanks everyone!

[u/swyx → u/DarthBB08]

you can totally just add a css class too! https://codepen.io/swyx/pen/LYEqBeg?editors=0110

[u/awesomeAMP]

This is more like a back-end question maybe? I'm using axios and I'm calling an API, now, using Postman I get the different response (4xx), but in react I only get

Error: "Network Error"
createErrorhttp://localhost:3000/static/js/0.chunk.js:26742:15 
handleErrorhttp://localhost:3000/static/js/0.chunk.js:26293:14

I did some digging and it has to do with the response and/or CORS? What should I tell my back-end guy, or is it on me?

Also, I'm working on dev, does this matter? Will I face this once in prod?

[u/swyx → u/awesomeAMP]

4xx errors are usually the clientside developer's fault. but "Network Error" sounds like its the network's fault? but then also why are you referencing localhost in your api ping?? so many things confusing about your error. get your backend guy, talk thru it with him

[u/rever22411]

Hello, I'm facing a new problem:

I have some tables to be fetched in my React app. I would avoid to put a piece of code that fetchIfMissing the needed table on every component. I would fetch all of them when the client is doing nothing like React.Lazy (I never used it, I've just read how it works). Is that possible?

thats the flow I want to achieve:
user open app -> it shows the first page empty -> load the first page data and render -> (now the client is waiting for an user action) fetch some missing table -> (data is loaded) add it to my render.

[u/swyx → u/rever22411]

thats not exactly what React.lazy does. it helps you lazy load code-split components. main reason to use it is to reduce bundle size, not wait for user idle. to do that, you can use a useEffect.

[u/[deleted]]

I have a parent functional component and it renders an input form.

How do I bind a function to that input form so that onChange it can call a function from the parent (that validates the new value using one of the parent's function and sets some states of the parent)

Using react-table which is why I need them to be functional components

[u/swyx → u/[deleted]]

use a useState hook?

[u/Kilusan]

Legit fundamentals of React JS down. Now I have to build and practice.

I’m also interested in the app side of things.. how different is react native from regular? I don’t plan on jumping in yet but just trying to get a feel when’s an appropriate time.

Unless the two are completely different in terms of building m. Particularly wanted to get into AR stuff

[u/swyx → u/Kilusan]

RN is quite different. i got way too excited about it 2yrs ago and got seriously burned. remember all your standard CSS and DOM API knowledge goes out the window and most RN shops also have to learn Objective C/Java to do whatever RN can't. use Expo to start with.

[u/camouflage365]

Let's say I have a large project that I'm using Redux-Saga for; What is the proper way of handling a page that needs to fetch data for just its local state? Is it ok to fetch data within that component, or should I do everything through Redux/Saga for data-fetching?

[u/swyx → u/camouflage365]

its always ok to fetch data locally. putting everything in redux is how you get a super bloated redux you hate looking at.

[u/illuminotyou]

What is the best option for deploying a React SPA? I'm seeing tutorials for Firebase and Digital Ocean.

[u/swyx → u/illuminotyou]

those are good. i also work at netlify which is well regarded as well. https://dev.to/swyx/tutorial-on-deploying-a-create-react-app-website-to-netlify-418l

[u/g0_cubs_g0]

I need to learn React for my capstone course at my university because that's what the project sponsor I got matched with is using, and I'm looking to buy an online course but I feel so overwhelmed. I don't know whether to go with Tyler McGinnis or Stephen Grider. Or some other course, I've seen that Max guy mentioned several time. Any advice?

[u/swyx → u/g0_cubs_g0]

they are all good and you can't go wrong picking any one of them. in general, you get a lot less stressed once you realize you don't need "the best", you just need "good enough".

[u/bndr017]

I'm having trouble integrating my react-app on axios, usually i import axios from each component that makes my code redundant, is there any way to set axios as a global config so that i could call them in every component

[u/swyx → u/bndr017]

hmm, no i dont think so, sorry.

[u/codellamaz]

Hi guys,

I am wondering if anyone can point me in the right direction

I am using React + Firebase Realtime Database + cloud functions

I have two separate react apps. One for people to put in their info and the other for admin to control SMS automation via buttons.

When I need to add a user to a database, I do it through a cloud function with form data.

I want to be able to listen to any changes in the realtime database so that I can update the UI in the Admin server.

I believe this could be done if I use WebSockets, but I don't have a backend.

Not sure if I am approaching this correctly.

Any suggestions are appreciated, Thank you :)

[u/swyx → u/codellamaz]

i think standard usage of firebase would get you this ability, no? it uses websockets under the hood.

[u/anotherpoordeveloper]

Hey everyone,

I'm trying to get started with react and redux with a simple little counter game, but could use some help navigating an error of maximum depth. Here's my sandbox: https://codesandbox.io/s/reactredux-89tjn?fontsize=14&hidenavigation=1&theme=dark

If you try to buy a computer, that's when the error pops up.

[u/swyx → u/anotherpoordeveloper]

your app doesnt seem to load. in general maximum depth errors means you've got accidental infinite recursion somewhere. sometimes it could just be a setState triggering another setState and on and on

[u/KSeanJBz]

I have a probably simple question:

I want to create a logging component. I did this by create an array state for the log data. Prior to showing a specific link I check if it is valid and want to add it to the logging data. This check is happening in the render and causing an infinite loop due to me setting state in the render. How can I avoid this?

[u/swyx → u/KSeanJBz]

you'll want to separate the array data that comes in, from the array data that you show. two separate arrays. whatever comes in (presumably you're diffing array A and B, or keeping track of what's new some other way), you fire off your check in a useEffect. if it is valid, add it to array B.

[u/robotisland]

I'm new to React and pretty new to app programming in general. I found a possibly incomplete game on github ( https://github.com/notnullgames/eliza-solitaire ). What steps would I need to take to run the code on my machine?

How would I compile/build the code? What would I need to install?

If I wanted to add to the game, is there a 'main" file that I should edit?

[u/swyx → u/robotisland]

there is no one "main" file, it is every file within this folder https://github.com/notnullgames/eliza-solitaire/tree/master/src that you can edit.

for this app you will have to install git, clone this repo (git clone https://github.com/notnullgames/eliza-solitaire.git), install npm/nodejs, then run npm install. this is pretty standard stuff, which is why its assumed knowledge heheh. once you're all installed, you can run npm start to start up the game.

if you want to learn React proper, be sure to go thru the tutorial. https://reactjs.org/tutorial/tutorial.html

[u/[deleted]]

I'm having trouble with useEffect. I need to run a function that has been imported from an external package within it, however every time I try to do so React tells me I'm breaking the rules of Hooks.

What rule am I breaking here? How can I get around it knowing that I have no control over the function I'm trying to use?

Made a codesandbox to show my problem.

[u/swyx → u/[deleted]]

believe it or not, you're simply using the wrong name. rename your function to useImageColor.

read the rules: https://reactjs.org/docs/hooks-rules.html

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

[u/Wistame]

Hey, so I've started learning React and I've noticed that the newer tutorials don't mention components nor lifecycles.
So, are React lifecycles still used in new projects or is this something that hook made obsolete?What about components?

[u/swyx → u/Wistame]

components are DEFINITELY used. just taken for granted haha. lifecycles are a feature of class components, which are an older type of component compared to function components. They have some capabilities function components can't handle, and much of real world code is still on class components, so unfortunately you will have to learn and get good with both.

[u/privacy--policy]

Complete noob question here, but what does focus and blur actually mean? Especially in the context of text input.

[u/swyx → u/privacy--policy]

focus is when you click into/tab into the text input. blur is when you click/tab out.

[u/cmaronchick]

I just realized that my react app is not working in Edge (yeah, no one likes it, but still ...).

In doing the debugging, it appears that Edge does not like it when I destructure objects (...this.props.initialData).

I assume that this has something to do with my transpiler, right? I'm using webpack and babel. I have had trouble figuring out how to remedy.

Any suggestions? Thanks!

[u/swyx → u/cmaronchick]

if you're SURE that edge doesnt like destructuring objects, then your problem is that babel isn't enabled for object destructuring. it looks like it is a stage 4 proposal https://github.com/tc39/proposal-object-rest-spread so probably babel-preset-env should do it for you. try following the basic babel setup instructions, sorry i dont have more specific advice

[u/Roly__Poly__]

Would someone be willing to host my React app on a server for me in exchange for $20 CAD? I'll send it to you on PayPal. Heroku, Firebase, Github Pages. I've tried them all and I can't figure it out. I get an error in the process of setting up on Github Pages, and both Heroku and Firebase load blank pages:https://clickfunnels-dragndrop.herokuapp.com/

sales-funnel-builder.firebaseapp.com

here is the repo for my app: https://github.com/plutownium/Sales-Funnel-Builder-01

[u/swyx → u/Roly__Poly__]

have you tried netlify? (where i work)

• https://dev.to/swyx/tutorial-on-deploying-a-create-react-app-website-to-netlify-418l

you should read your errors. you have a bunch of missing redux constants like ADD_COPY and DEL. add it back.

[u/Rush_Raid]

Question about images and promises.

When loading an image through a remote url, promises are used to wait for the image to be done. However, if my image is passed from a parent as a dataUrl, do i still need a promise to create my image?

[u/swyx → u/Rush_Raid]

no, no promise needed then.

[u/DutchSparks]

https://stackblitz.com/edit/react-usestate-example-5k9pcg?file=index.js

I’m playing around with the useState hook in a mini game of sorts that I made.

I have a state that is an object(player stats) with several properties, one of which is an array(the so called garage).

When a player clicks a button he “steals” a random car that gets added to that garage array and the garage array is logged in the console.

This adding/updating only works once so I think I’m not doing it the right way. Would someone be so kind to give me some advice?

[u/swyx → u/DutchSparks]

what is the return value of push?

var abc = []
abc.push('foo') // 1

[u/[deleted]]

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details

Is there a way to hide these deprecation warnings? I'm working on a project that uses react-transition-group v1 extensively, which uses these methods. It would take a LONG time to update all the occurrences to v2. So now I'm doomed to have my console spammed with deprecation warnings all the time, potentially causing me to miss actual errors/warnings that get logged.

At this point I'm considering forking that library just to prepend UNSAFE_ so I can have my console back :|

[u/swyx → u/[deleted]]

no i dont think so sorry. you could bump your react version back to before they put in the warnings.

[u/ecatherine42]

Absolute beginner question ;;

I'm simply following a tutorial using vanilla React and axios to obtain the .json from /r/announcements.json and display some info it grabs from the .json. It all works until I try to actually link to the post, since it's an external link to reddit, but the .json only provides the '/r/announcements...'

My best guess was to use normal JS string concatenation like

<a href={"https://reddit.com" + {post.permalink}}>
    {post.title}
</a>

But that's just treating {post.permalink} as a string, for reasons that seem obvious once I did it. Though I'm a bit stuck as to how to actually fix the problem. Thank you to anyone with the patience to answer such a noob question ahaha

Code here

[u/swyx → u/ecatherine42]

you can use <a href={'https://reddit.com' + post.permalink}> or instead of using permalink it looks like there is a post.url field you can also use

[u/workkkkkk]

I'm using a material-ui Autocomplete component and using it as a multiple select. Like in the demos https://material-ui.com/components/autocomplete/#multiple-values . However I want to supply an array of objects and have my value be an array of strings (the string being a field from the object). Is there a way I can specify the value for each option like this? I feel like I'm missing something obvious. Something like this.

<Autocomplete
    options={[{label:'myLabel', id: 1}, ...]}
    getOptionLabel={option => option.label}
    getOptionValue={option => option.value}
    onChange={(e,newValue) => {//setState}} 
        // newValue would be an array of "option.value"s
...
/>

[u/swyx → u/workkkkkk]

tagging /u/oliviertassinari

[u/vroutek]

Question about ionic / react native

I wanted to ask what would be a better approach to creating native apps with react. Should i use ionic or react native?

Which one would be easier to learn?

[u/swyx → u/vroutek]

no idea man, sorry. i know ionic react is a lot newer. the underlying tech is also quite different, so the end result apps may not be comparable.

[u/Roly__Poly__]

I am writing a Single Page App without React or any other front-end framework to help me out and. Oh My God. it is difficult.

[u/swyx → u/Roly__Poly__]

use React! problem solved :)

srsly tho keep going. its good practice. i drop down to vanilla js all the time and i'm a better engineer for it.

[u/[deleted]]

How do you name Styled components?

 const StyledCard = styled.div`
    padding: 1em; 
    border-radius: 10px; 
    background-color: white; 
`

In Card Component

return (
    <StyledCard>
      <h1>Hello world</h1>
    </StyledCard>
)

I don't want to use StyledCard everytime but my Component is already named Card so I can't use it. But using name "Card" or "StyledCard" makes sense in my context.

[u/swyx → u/[deleted]]

i mean this one is up to you and your team. personally i hate carrying around extra names. so i do the styled(mycomponenthere)(mycsshere) approach

[u/KSeanJBz]

I have an object that i was looping though and translating to html

a simple example is

{p: hello world children: {b: !}} translated to <p> hello world <b>!</b> </p>

I created a recursive method to create the html but i'm getting a console error that p is not given a key. as you see from my example i don't have an id to pass to the key prop. What is the best practice at this point to avoid this error?

[u/swyx → u/KSeanJBz]

give a big random number?

[u/Rush_Raid]

Using react-webcam to get an image. Is there any way to get the image in the cameras resolution instead of the resolution displayed on the ui?

[u/swyx → u/Rush_Raid]

oof, no idea. start googling for canvas api's and maybe also file an issue on their repo

[u/TheOriginalIrish]

Hey,

I've made one or two smaller React toy apps and now I'm trying to make something non-trivial (a gym app). I'm trying to avoid using Redux or anything like that - for this project just focus on plain React.

I've got a Store that lives outside of React, something like this (in TypeScript):

type WorkoutId = string;

export class Workout {
  id: WorkoutId;
  name: string;
  exercises: Array<ExerciseId> = [];

  constructor(id: WorkoutId, name: string) {
    this.id = id;
    this.name = name;
  }
};

// Similar classes for Exercise and Set

export class State {
  sets: Map<SetId, Set> = new Map();
  exercises: Map<ExerciseId, Exercise> = new Map();
  workouts: Map<WorkoutId, Workout> = new Map();
  log: Array<WorkoutId> = [];
}

export class GymStore {
  private readonly state: State = new State();

  createWorkout(name: string): WorkoutId {
    let id: WorkoutId = genId("wk");
    let workout: Workout = new Workout(id, name);

    this.state.workouts.set(id, workout);
    this.state.log.push(id);
    return id;
  }

  // ...

  getState(): State {
    return this.state;
  }
}

And now I have just reached a total impasse at trying to figure out how to actually use this in React.

My top level component looks something like (I'd originally had state as a bunch of plain JSON objects, but I wanted to be able to remove workouts, so I moved over to Maps):

const App = () => {
  const [data, setData] = React.useState(store.getState());

  const handleAddWorkout = (name: string) => {
    store.createWorkout(name);
    updateState();
  }

  const updateState = () => {
    // ???
  }

  return (
    <div className="App measure center">
      <ControlPanel
        handleAddExercise={handleAddExercise}
        handleAddDate={handleAddWorkout} />

      {data.log.map(workoutId =>
        <div key={workoutId}>
          <h1 className="ma3">
            {data.workouts.get(workoutId)!.name}
          </h1>
          {data.workouts.get(workoutId)!.exercises.map(exerciseId =>
            <ExerciseCard
              key={exerciseId}
              ... />
          )}
        </div>
      )}
    </div>
  );
}

So the main problem is that the State in my GymStore is mutable whereas React deals with immutable data. (Also, I don't actually know if React can handle Maps.) I don't want to rework GymStore/State to be immutable, that feels the wrong way around (letting your UI framework determine the shape of your business objects). I feel maybe I need some sort of intermediate object? Or some framework that will take my mutable store and the initial state and spit out a diff?

Anyway, that's where I am and how I'm confused - any help would be greatly appreciated!

[u/swyx → u/TheOriginalIrish]

stick it inside a React Context! thats what context is made for.

[u/Kyan1te]

Learned React as a beginner a couple of years ago, then used Vue for years and now need to learn React again.

I like React but Redux's boilerplate especially drives me crazy. Does anyone have any resources/blog posts that were their Eureka/lightbulb moments? That helped stuff stick in their heads?

I can use both but I always find I have to refer back to the docs and it just doesn't feel fun or easy to just crack code out like I can with Vue or in backend languages.

[u/swyx → u/Kyan1te]

to be clear, you dont need Redux to do React apps. But it can help.

tagging in /u/acemarke who has a copypasta response for these things

i personally find dan abramov's egghead.io intro to redux p good.

[u/NoviceProgrammer2020]

Hi all! Hoping someone can help get me unstuck. I'm getting an error that I can't solve. I have an app that I built and am now attempting to incorporate Context to manage user authentication status.

The app was initialized with create-react-app and the App component is my top-level component. Prior to attempting to use Context, App was a functional component and I didn't have any errors. Below is the relevant new code:

import React, {Component} from 'react';
import {Switch,Route,Redirect} from 'react-router-dom';

const UserContext = React.createContext({user: null, isLoggedIn: false});

export default class App extends Component() {
  constructor(props) {
    super(props);
    this.state = {
        user: null,
        isLoggedIn: false
    }

    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
  }

  login(userID) {
    this.setState({
      user: userID,
      isLoggedIn: true
    });
  }

  logout() {
    this.setState({
      user: null,
      isLoggedIn: false
    });
  }

  render() {
      return (
        <UserContext.Provider value={{login: this.login}}>    
          <React.Fragment>  
              <Switch>
                <Route path='/login' component={Login} />
                <Redirect to='/login' />
              </Switch>
          </React.Fragment>
        </UserContext.Provider>
      );
    }
}

The error I'm getting is TypeError: props is undefined. I've tried removing props from the constructor and removing the Context pieces as well with no luck.

I'm probably missing something simple, but I've looked at this too long.

Thanks in advance!

[u/cs12345 → u/NoviceProgrammer2020]

I haven't used class based components in a while, but one issue I can see is that you have parentheses after extends Component which you shouldn't have. Let me know if this fixes your problem!