React input field value issue [duplicate]

Question

const [inputValue,setInputValue] = useState("")
handleChange = (e)=>{
 setInputValue(e.target.value)
console.log(e.target.value,inputValue)
}

this is a simple input tag onChange function but the thing here inside the handleChange function when am logging the values e.target.value is what am typing on the field and inputValue which is the state am setting is actually empty so if i type let's say 'd' in the input field the value of the state is actualy empty and the next time i type something now it has the value 'd' which i have typed on previously...pls help me solve this

prasanth · Accepted Answer · 2022-05-24 06:18:49Z

1

Yes. State change is async operation. console.log immediately executed. That mean console.log print the inputValue before the state update. That why if doing second its showing previous value.

Better you can detect the state change using useEffect

useEffect(()=>{
  console.log(inputValue)
},[inputValue])

answered May 24, 2022 at 6:18

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user12417761 Over a year ago

But this will render dom many times

jkv27100 Over a year ago

the thing is that i want to do a search bar and because of this when i type let's say 'a' or something search doesn't work because the state value is empty that time

Andy Over a year ago

@mohitmaroliya all that effect does is run some code if the inputValue changes. It doesn't change state (although it could), and so there would be no re-rendering.

Andy · Accepted Answer · 2022-05-24 07:12:16Z

"the thing is that i want to do a search bar and because of this when i type let's say "a" or something search doesn't work because the state value is empty that time."

Setting state is an async process. When you try to log the state immediately after setting it all you're doing is logging the existing state before the component has re-rendered.

@prasanth is correct with their answer that adding a useEffect to watch for changes in the input state is the only way to log that new state.

If you're trying to write a search bar here's a quick contrived solution that filters out animal names from an array.

const { useState } = React;

function Example({ data }) {
  
  // Initialise the input state
  const [ input, setInput ] = useState('');

  // When the input value changes
  // update the state
  function handleChange(e) {
    setInput(e.target.value);
  }

  // `filter` the data using the input state,
  // and then `map` over that array to return
  // an array of JSX
  function getFiltered(input) {
    return data
      .filter(el => el.toLowerCase().includes(input))
      .map(el => <p>{el}</p>);
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Find an animal"
        onChange={handleChange}
        value={input}
      />
      <div>{getFiltered(input)}</div>
    </div>
  );

}

const data=["Alpine Goat","Beaver","Carolina Parakeet","Dragonfish","Eurasian Wolf","Frilled Lizard","Gila Monster","Honduran White Bat","Immortal Jellyfish","Japanese Macaque","Kooikerhondje","Leopard Gecko","Megalodon","Nova Scotia Duck Tolling Retriever","Orb Weaver","Pink Fairy Armadillo","Rhombic Egg-Eater Snake","Satanic leaf-tailed gecko","Tibetan Fox","Umbrellabird","Vervet Monkey","Whoodle","Xoloitzcuintli","Yeti Crab","Zonkey"];  

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collectives™ on Stack Overflow

React input field value issue [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related