Confusing Syntax of Spreading React Props

Question

const RoundedIcon = ({
  name,
  size,
  color,
  backgroundColor,
}: RoundedIconProps) => {
  return (
    <Box
      height={size}
      width={size}
      justifyContent="center"
      alignItems="center"
      style={{ borderRadius: size / 2 }}
      {...{ backgroundColor }}
    />
  );
};

I understand how to use the spread operator and how you can easily spread the rest of any additional props to a React child, but can someone explain to me why this person is adding extra curly braces to an already destructered prop 'backgroundColor' of RoundedIcon component?

Answer 1

In my opinion, it does not make sense. It may just be an artefact of this person doing:

{...{ backgroundColor, name, color }}

and then not needing name or color anymore to be spreaded in the props. So leaving

{...{ backgroundColor }}

Because it's exactly the same as:

backgroundColor={backgroundColor}

---

After writing this, I realized that it may be faster to type, and so you don't have a messy two times 'backgroundColor' in your code.

Answer 2

In your case above spreading {...{ backgroundColor }} will pass backgroundColor in props to the child component. But if you want to rename the variable you have to spread it like below:

function ComponentA() {
  const backgroundColor = "red";

  return (
    <div>
      <p>Component A</p>
      <ComponentB {...{ helloWorld: backgroundColor }} />
    </div>
  );
}

function ComponentB(props) {
  console.log(props); // { helloWorld: "red" }

  return <div>Component B</div>;
}

Answer 3

我怀疑这{...{ backgroundColor }}是否比backgroundColor={backgroundColor}更好