Question 205121 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – onChange for select form in React showing previous object in array

I’m creating a simple select dropdown form in React using Bootstrap. The options in the dropdown are populated from an array of "region" objects retrieved from the app’s database. My problem is that when I click on an options from the dropdown, the first item click console logs a 404 error from the api. The second click console logs the first item I clicked on, the third click shows the second item I clicked on and so on, so that every click yields the data for the previous item clicked on.

The form I’m using:

<Form>
    <select class="form-control"  onChange={handleRegionChange} >
        <option>Select a Region</option>

        {regions.map((region) => 
        <option
            value= {region.id}
            key={region.id}
        >
        {region.country}
        </option>
        )}
    </select>
</Form>

The handleRegionChange function I’m using looks like this. Note, that even without the additional retrieveRegion step on the third line to get the region using the id passed from the form, I still have the same issue. The console log shows null for the id of the first item clicked on, then the id for the previous item, etc.

 const handleRegionChange = (e) => {
    setRegionId(e.target.value);
    retrieveRegion(regionId)
    console.log(regionId)
  }

Here’s the setup for my functions:

const [regions, setRegions] = useState([]);
const [currentRecipe, setCurrentRecipe] = useState(initialRecipeState);
const [regionId, setRegionId] = useState()
const [currentRegion, setCurrentRegion] = useState ()
const [regionRecipe, setRegionRecipe] = useState(initialRegionRecipeState);


useEffect(() => {
    retrieveRegions();
    retrieveRecipe(id);
  }, []);

Screenshots with data displayed after clicking on select option to demonstrate the problem. First I click on Mexico and it shows France, then I click on the US and it shows Mexico. Again, this problem also occurs when I simply try to console log the id from the value of the option selected. screenshot showing dropdown with the word Mexico selected but France displayed above

Summary:
I tried to create a dropdown select form from an array of objects. I expected to be able to click on one of the options in the dropdown form and get the value of the id associated with that item. Instead I keep getting the value of the id for the previously selected option.

Tags:

2

Answers


  1. 0

    State updates in React are asynchronous; when an update is requested, updates will not be made immediately.
    But you can track the state changes in the useEffect hook.

    const handleRegionChange = (e) => {
  setRegionId(e.target.value); // Here the regionId was set correctly
  retrieveRegion(regionId)
  console.log(regionId).   // But React doesn't update the state immediately and this will be the previous value.
}

// If you want to do something after setting new state, you can use useEffect to track the new state.
useEffect(() => {
  console.log(regionId); // Updated regionId
}, [regionId];
    Login or Signup to reply.
  2. 0 
       **use event. target.value**
  
  const [regionId, setRegionId] = useState()
  
  const handleChange = async (event) => {
      setRegionId(event.target.value)
      console.log(regionId)
  }
  useEffect(() => {
  console.log(regionId)
  }, [regionId];

   **or if you do not use async/await, use like this** 
  
  const [regionId, setRegionId] = useState()
  
  
   <select class="form-control" 
      onChange={(e) => setRegionId(e.target.value)} 

  
    value={regionId}>
          <option>Select a Region</option>
  
          {regions.map((region) => 
          <option
              value= {region.id}
              key={region.id}
          >
          {region.country}
          </option>
          )}
      </select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search