JavaScript

I have the following React component. I am relatively new to react, so don’t have all the concepts of using hooks firmly in my grasp.

I’ve seen a few other questions pointing to the asynchronous nature of the setState function but that does not seem to be the issue here.

Expectation from the code: I expect that as the user inputs values in the fName and lName inputs, the h1 gets automatically updated and rendered

What Actually Happens: As I enter values in the inputs, the typed value does not show up in the input fields on the UI. The heading (h1) also does not update.

Additional Note: The code works as expected if I use “if” statements to check and conditionally update the corresponding property of the Object instead of using prevState[name] = value; in setHeadingText.

import React, {useState} from "react";

function App() {

  const [headingText, setHeadingText] = useState({
    fName: "",
    lName: ""
  });


  function handleChange(e){

    const {name, value} = e.target;
    
    setHeadingText(prevState => {
      prevState[name] = value;
      return prevState;
    })
  }

  return (
    <div className="container">
      <h1>Hello {headingText.fName + " " + headingText.lName}</h1>
      <input type="text" name="fName" placeholder="First Name" value={headingText.fName} onChange={handleChange}/>
      <input type="text" name="lName" placeholder="Last Name" value={headingText.lName} onChange={handleChange}/>
      <button>
        Submit
      </button>
    </div>
  );
}

export default App;

Answer

You’re not updating the identity of the object, you’re updating the object internally. React can’t see that change.

Separate fName and lName into separate state atoms or update the entire state object into a new object instead of mutating it internally:

setHeadingText(prevState => ({...prevState, [name]: value}))

ReactJs – Does not render the updates after setState is called

Advertisement

Answer