0

I'm working on a component in my react app that allows for users to select multiple foods in a drop down list. I'm experiencing a problem where the first food item I select is logged as an empty array so every food item I select after that is delayed by one food item. For example, let's say the first food item I select from the dropdown is "Fries", then console.log(foods) will log an empty array. If the second item I select is "Burgers", then the console will log [Fries]. If the third item I select is "Salad", then the console will log [Fries, Burgers]. I'm pretty stuck so any help would be appreciated!

This is where the handle change function is called on the dropdown menu:

<Select
    className={classes.dropDownMenu}
    options={listItems}
    onChange={value => handleChange(value)}
/>

This is my function for handling change on dropdown:

const [foods, setFoods] = React.useState([])

const handleChange = value => {
  setFoods(prev => [...prev, value])
  console.log(foods)
}
mw3981
  • 93
  • 6
  • `setFoods` is async so `console.log(foods)` won't show the updated value until the next rerender. See [React setState not Updating Immediately](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately). Think of state setting as "next time you render at some point later on, make this value the new state" rather than "immediately make this state the value". State should be totally immutable for a given rendering call of your component. – ggorlen Jan 05 '22 at 17:58
  • @ggorlen I tried writing it in the format of `const handleOnChange = () => {this.setState(prev => {return {value: prev }},() => {setSelectedNames(this.state)}` but it doesn't work because it says that this is undefined – mw3981 Jan 05 '22 at 23:36
  • I'm not sure what those pieces of data are. Can you share a [mcve] and explain what you're trying to accomplish exactly? In the code in this comment you have `this.` as if it were a class component but the code in the question is a functional component with hooks, so I'm a bit confused. – ggorlen Jan 06 '22 at 00:00

1 Answers1

0

Have you tried to pass the set state of foods like this...

   const handleChange = value => {
      setFoods(() => [...foods, value])
      console.log(foods)
   }

that should use the original data and add new data to the state by spreading the original state into the array and adding the value passed in from your Select component.

Blaine Reid
  • 11
  • 1
  • I tried this and its the same problem as I mentioned in my post where the console log is delayed by one food item. When I select my first item, it logs an empty array and when I select my second item, it logs the first item in an array – mw3981 Jan 05 '22 at 23:25
  • The console.log is going to be delayed as @ggorlen mentions, setting state is an async process. Try setting a time out to check foods after a second or so, in your handleChange function or even outside it that triggers on the rerender before the return() – Blaine Reid Jan 06 '22 at 15:33