Can someone please explain the difference among the following expressions?

const handleChange = (event) => {
  const newEmail = event.target.value;
  setEmail(newEmail);
}
const handleChange = (event) => setEmail(event.target.value);
const handleChange = ({target}) => setEmail(target.value);

The two expressions will operate in exactly the same manner, just a small difference in how you access the target property. The event object has a property named target. The curly braces allow you to destructure the object and retrieve the named property as a variable.

Here is a link to some helpful overview on the topic: What is Destructuring in JavaScript?

2 Likes