what is onChange={(e) => setName(e.target.value)}? in React mean

Question

I am new to React;I am learning about React Form. I understand the code but I do not really understand the concept behind and why we use this line " onChange={(e) => setName(e.target.value)}".

Thank you for your help.

They used this example:

import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Answer 1

You have two different things happening here.

Event (e)

First you have e which is short for event. To understand what it does change onChange={(e) => setName(e.target.value)} to onChange={(e) => console.log(e)}. Inspect the log and you'll find a list of events in which one of them is target. Open target (if not already opened) and within target, you'll find value. In short, this is the target value that's being typed in your input, it's what the user is typing.

useState

Your using state to track the value in your input. So [name] is the getter and [setName] is the setter. If you notice in your alert you have alert(The name you entered was: ${name}). The variable name is the getter which means it holds the current value of the state. On the other hand setName will set that value. It's able to do so because you're setting and tracking the value here on change onChange={(e) => setName(e.target.value)}.

Answer 2

means e is the event that is happening which here is change, target is the element that triggered the event, which here is the input, and value is the value of the input element Onchange is as the name suggests and setState is used to change the state you defined eariler you should read the documentation as well it would clear stuff up maybe an online explanation on youtube anyways all the best for your React journey

Answer 3

There are at least 5 concepts that I can think of being used in this single line that I recommend you to learn about

1. Higher-Order Functions
2. Anonymous functions
3. Arrow Functions
4. State
5. Synthetic Events

To start your journey, just know that this code onChange={(e) => setName(e.target.value)} is the same as the one below:

function clickHandler(e) {
  setName(e.target.value)
}

<input 
  type="text" 
  value={name}
  onChange={clickHandler}
/>

Maybe that makes things clearer.

Answer 4

I don't necessarily have an answer but I am here because I have been looking for the answer to this question and I feel that the people who have answered have missed what the question is really asking - or at least what I am looking for.

I found a similar code to this question while going through the MDN react guide tutorial and what made me curious is why use setUser setter instead of just using a local variable?

I guess the answer I am reaching is the setter setUser (setState) is used in order to re-render the component when the changed value is also represented in the component. However, in the above example the name is not actually used the component so there is no need for using setUser (or useState).

Check out this tweak to the code that works perfectly with a local variable:

import ReactDOM from 'react-dom';

function MyForm() {
  //const [name, setName] = useState("");
  var name = "";

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          onChange={(e) => (name = e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));