React event target value in onChange

Question

What is the difference between

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

and

onChange={setInsertedTitle}

When should one or another be used?

Answer 1

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/compassionate-fast-krrib?file=/src/App.js