Why do I need to spread the object to pass it down as a prop in React?

Question

I saw this code in a tutorial:

tours.map(tour => {
  return <Tour key={tour.id} {...tour}/>;
})

Tours is just an array of objects. I'm beginner to react, and as I understand, "tour" object is passed down as a prop to the component. However, I don't understand why do you have to individually pass all key-property values with the spread operator, why can't you just pass down the whole object?

Also why there is no need to define a name? Like: <Tour greet = {'hello'} />

That also simplified format. And while executing running JSX convert to JS. [See this](https://reactjs.org/docs/react-without-jsx.html). Finally all props convert into key value object — prasanth, May 01 '21 at 11:29

score 0 · Answer 1 · answered May 01 '21 at 11:27

This basically is to provide simplicity to your code writing in ES6, and react adopted the same, please find below an example to understand the concept. Also reg key, we should use it avoid react throwing missing key issue exception // simple example

function App() {
 return <Hello firstName="Minh" lastName="Nguyen" />;
}
// another example with spread operator
function App() {
  const props = {firstName: 'Minh', lastName: 'Nguyen'};
  return <Hello {...props} />;
 }`

Why do I need to spread the object to pass it down as a prop in React?

1 Answers1