How to reduce the transfer of props to the component?

Question

React

Hello everyone, I'm just getting started with React. A fan of code refactoring. Could you tell me how to shorten such a record?

function MyComponentItem({items}) {
      return (...)
   }
   function MyComponent({items}) {
       return (<div> 
         { <MyComponentItem items={items}  /> }
       </div>)
   }

Specifically, I don't like it.
<MyComponentItem items={items} />

It can be like that,
<MyComponentItem {items} />
or
<MyComponentItem {{items}} />
well, or something similar in the spirit of destructuring. Could you tell?

Answer 1

As a result, I came to this, it is convenient if there are more than one props. But as I understand it, an extra operation occurs, the creation of an object and its destructuring, I didn’t test how this affects performance

function MyComponentItem({items, settings, itemWidth}) {}

    <MyComponentItem {...{items, settings, itemWidth}}  />

Answer 2

Hey! Try this, it should work: <MyComponentItem {...items} />
PS By the way, this will pass all the elements of the items object from the prop.