Writing Element({...props}) instead of Element(props)

Question

I saw somewhere this notation function Element({...props}), but you could also simply write function Element(props). Why should you write this with spread notation?

function Element({...props}) {
  // render element here
}

versus

function Element(props) {
  // render element here
}

Answer 1

It is called a spread operator

You can use the ES6 Spread operator to pass props to a React component. Let's take an example for a component that expects two props:

function App() {
  return <Hello firstName="Ahmed" lastName="Bouchefra" />;
}

Using the Spread operator, you would write the following code instead:

function App() {
  const props = {firstName: 'Ahmed', lastName: 'Bouchefra'};
  return <Hello {...props} />;
}

This explanation is from here