0

Working through a React tutorial and come across the code below:

Why do the values being passed into the function have to have '{}' around them?

const Search = ({ value, onChange, onSubmit, children }) =>
<form onSubmit={onSubmit}>
    <input
    type="text"
    value={value}
    onChange={onChange}
/>
    <button type="submit">
      {children}
    </button>

KennyLogin
  • 19
  • 5
  • This is called [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). Your `Search` component gets a `props` object, and instead of writing `const value = props.value; const onChange = props.onChange; ...`, you can destructure them right away in the function signature. – Tholle Jul 04 '18 at 17:49
  • Thank you! And what about in the element itself Ex: value={value} – KennyLogin Jul 04 '18 at 17:58
  • That's how you go back to JavaScript land inside your JSX, and you can put whatever expressions you like in there. E.g. `` – Tholle Jul 04 '18 at 18:00

0 Answers0