What is this prop syntax in my component?

Question

I have the following code:

const cEditor = (onUpdate, props) => (<SelectEditor onUpdate=(onUpdate) {...props} />);

What is being done by {...props}? It seems as if it is passing down props to the component. What does this syntax mean?

Answer 1

That's using spread syntax to "spread" the props to the component. Per the React documentation:

Spread Attributes

If you already have props as an object, and you want to pass it in JSX, you can use ... as a "spread" operator to pass the whole props object. These two components are equivalent:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. We recommend that you use this syntax sparingly.

So, if you have an object with props as keys and the prop values as values, you can use spread syntax to spread them to the component. These two components are the same:

const props = {
    a: 5,
    b: "string"
}
<Example {...props} />

Is the same as:

<Example a={5} b={"string"} />

In your case, props in the function cEditor is an object will all the props and prop values as keys and values respectively. Then, those props and prop values are passed to the <SelectEditor>, except for onUpdate, that is passed separately (but is overridden if props has an onUpdate key and value).