What is the correct way to pass props to component in React?

Question

I want to know which is a better method or the "correct way" to pass props to a component, in object or plain props:

plain props:

{ this.props.data && this.props.data.map((item) => {
  return(
    <MyComponent title={ item.title } thumbnail={ item.thumbnail } />
  )
});
}

or object:

{ this.props.data && this.props.data.map((item) => {
  return(
    <MyComponent singleItem = { item } />
  )
});
}

Which I should use?

Answer 1

Either should work. However, if you plan on using shouldComponentUpdate to minimize re-rendering and either of title or thumbnail are JS primitives then you should pass them separately to take advantage of shallow equality.

If you want to pass them the props separately but still want to not have to write the props separately, you can use the spread notation:

 <MyComponent {...item} />