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

Reactjs – Why input value isn't changed when re-render is occured by object state update

I am studying React through React Offical Document.

I have question about this challenge.

(https://react.dev/learn/updating-objects-in-state#challenges

https://codesandbox.io/s/rztj2r?file=/src/App.js&utm_medium=sandpack)

Assume that the given code is executed as it is without modification,

I understand why {player.score} is disappeared when re-render is occured by handleLastNameChange() event handler called.

But I can’t understand why {player.firstName} isn’t disappeard when re-render is occured by handleLastNameChange() event handler called.

I expected {player.firstName} is disappeared when re-render is occured by handleLastNameChange() event handler called, but it doesn’t work.

Tags:

2

Answers


  1. 0

    But I can’t understand why {player.firstName} isn’t disappeard when re-render is occured by handleLastNameChange() event handler called.

    If you look in the log, you’ll see this

    Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

    There are two ways an input can be used: controlled, and uncontrolled. For controlled, you pass in a string to the value prop, and react will keep the input in sync with that prop. For uncontrolled, you pass in undefined for the value prop, and then the input will handle its state itself and ignore the prop.

    So when the page started, you were passing in a string and thus controlling the input. Then when handleLastNameChange is called, the state accidentally sets firstName to undefined, which gets passed into the input. This flips the component to uncontrolled mode, which is not something it is built for. So it fires off the warning and then continues showing what it was previously showing, until something causes it to change.

    Login or Signup to reply.
  2. 0 
        import { useState } from "react";

function App() {
  const [player, setPlayer] = useState({
    firstName: "John",
    lastName: "Doe",
    score: 10,
  });

  const handleLastNameChange = (e) => {
    setPlayer({
      ...player,
      lastName: e.target.value,
    });
  };

  return (
    <div>
      <label>
        Last Name:
        <input value={player.lastName} onChange={handleLastNameChange} />
      </label>
      <div>First Name: {player.firstName}</div>
      <div>Last Name: {player.lastName}</div>
      <div>Score: {player.score}</div>
    </div>
  );
}

export default App;

    When you handle state updates in React, the component re-renders based on the new state. In the challenge you mentioned, let’s take a closer look at why {player.score} disappears but {player.firstName} doesn’t when handleLastNameChange() is called.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search