What is the difference between

onChange={({ target: { value } }) => setInsertedTitle(value)}

and

onChange={setInsertedTitle}

When should one or another be used?

What is the difference between

onChange={({ target: { value } }) => setInsertedTitle(value)}

and

onChange={setInsertedTitle}

When should one or another be used?

• javascript
• reactjs
• react-hooks

• 1 The second one will pass the entire synthetic react event to setInsertedTitle – evolutionxbox Commented Jul 25, 2021 at 14:56

3 Answers 3

Using onChange={({ target: { value } }) => setInsertedTitle(value)} you are passing the current target value as a parameter.

It is because onChange generates an Event, and you access the value by event.target.value ...

event: {
  target: {
    value: "string"
  }
}

On the other hand, when you use the function like in onChange={setInsertedTitle}, it receives the event.

You can see it here: https://codesandbox.io/s/passionate-fast-krrib?file=/src/App.js

Look at what each does and spot the differences:

onChange={({ target: { value } }) => setInsertedTitle(value)}

• Creates an arrow function (let's call it func)
• Whenever onChange/func gets called, e.g. func(event):
  • It uses destructuring to set value to the value of event.target.value
  • It calls setInsertedTitle with value (therefore event.target.value)

In the other case:

onChange={setInsertedTitle}

When onChange gets called with event, we directly call setInsertedTitle with event.

Therefore the main difference is whether it passes event.target.value or just event.

The first one passes a function to onChange that, when called, will get the value of the target element of the event (this is probably an input element, so target will be that input element) and pass that value to setInsertedTitle. So when the event occurs, setInsertedTitle gets called with a string (the value of the input).

The second one will directly pass setInsertedTitle to onChange. When the event occurs, setInsertedTitle will get called with an event object rather than the value of the input.

For the avoidance of doubt: The first one is correct, the second one is incorrect. (Even if you wanted to have an event object in your state data — which you almost certainly don't — you can't just keep the one you're passed; you're not allowed to keep them as they get reused [I think that's going to change at some point].)