React Controlled Component

Question

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [headingText, setHeadingText] = useState("");

  function handleChange(event) {
    // console.log(event.target.value);
    setName(event.target.value);
  }

  function handleClick(event) {
    setHeadingText(name);

    //after everything is done
    event.preventDefault();
  }

  return (
    <div className="container">
      <h1>Hello {headingText}</h1>
      <form onSubmit={handleClick}>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={name}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

I will use the above code for asking my question. input element handles its state change via user input(value attribute) but react uses state variable to handle state change. In order to have one constant value we set react variable to handle state change of form element as well.

value={name}

but if we do so and then access the value entered by the user through event.target.value, How is it able to track what user enters in the input field as we have set value={name}. Shouldn't event.target.value give us the value of name variable instead of user input

mhodges · Answer 1 · 2021-05-21T20:10:13.467

0

The answer is that react is 1 way data flow. It's not bound both ways like angularjs or Angular [(ngModel)] is. Meaning that internal DOM element state updates do not take effect until the component is re-rendered - and the component will not re-render until the component state is changed. Therefore, the value in the input is not being "set" by react until state changes. You can modify the value in the input as much as you'd like, and react won't do anything until the onChange handler that then updates state is triggered. Only then will it re-render the component and put the new value in the input box.

Until the re-render happens, the react state and the internal state of the <input> element are out of sync. event.target.value reads back the internal state of the input element, whereas {name} reads back the value of the name property on the, in this case, App component. The two get resync'd when the component is re-rendered.

edited May 21 '21 at 20:10

answered May 21 '21 at 18:44

mhodges

10,938
2
28
46

isn't event.target.value same as input.value and input.value={name}. I still can not understand when we type we change input.value but we have set input.value={name} – rv7 May 22 '21 at 09:47
How is it getting updated on keypress as we have already set input value to {name} – rv7 May 22 '21 at 09:47
@rv7 component state is not the same as the local state of the HTML element. The component state will set the local HTML element state when the component is rendered, but otherwise you are free to change the local state. The two are not kept in immediate sync all the time like they are when using `[(ngModel)]` in Angular. – mhodges May 23 '21 at 06:20

score 0 · Answer 2 · answered May 21 '21 at 19:14

I think like this.

value={name} is external state for input element. In React term it's props.

And event.target.value comes from the internal state of input element right after the user keypress happens. In react terms it's a state.

So you change your internal state from user input. It's event.target.value

And you set input element's prop when parent component rerenders. it's value={name}

React Controlled Component

2 Answers2