Why is the spread operator required in this JSX and how does the resultant HTML use equal-to ("=") as the delimiter?

I used the online Babel REPL to transpile the following JSX into JavaScript:

JSX:

function Button({children, ...rest }) {
  return (
    <button {...rest}>
      {children}
    </button>
  )
}

JavaScript output:

function Button({ children, ...rest }) {
  return React.createElement("button", rest, children);
}

In the JavaScript, the {...rest} that I passed to the button element in JSX is simply passed as an object argument to the createElement function. If I use {rest} instead of {...rest}, why is it an invalid expression?

Invalid JSX:

function Button({children, ...rest }) {
  return (
    <button {rest}>
      {children}
    </button>
  )
}

1. In the object destructuring in the function declaration, I have already collected all the properties other than children into the rest object, and every javascript object is a valid expression in JSX, isn't it? So what forces us to use {...rest} in JSX in the <button> element?

2. My 2nd question is: when we use spread operator on an object in JavaScript, it spreads the object's key value pairs using a colon as the delimiter between the key and the value. But when we use the spread operator inside a JSX element, in the resultant HTML, how do the key value pairs get spread with = as the delimiter between the key and the value?

> If I use {rest} instead of {...rest}, why is it an invalid expression?

Because that's not supported in JSX. You may only use curly braces in the following ways:

• Directly inside the children of an element, e.g. <div>{expression} static text</div>
• To specify a dynamic value for an attribute, immediately following the = sign, e.g. <div className={dynamicClass}></div>
• To forward all properties of an object as props to a component.

Note that for this last use case, the syntax must be exactly <ComponentName {...object}>

See also:

https://react.dev/learn/javascript-in-jsx-with-curly-braces#where-to-use-curly-braces
https://react.dev/learn/passing-props-to-a-component#forwarding-props-with-the-jsx-spread-syntax

> when we use spread operator on an object in JavaScript, it spreads the object's key value pairs using a colon as the delimiter between the key and the value

No, colons are just used in object literals and has nothing to do with the internal representation of an object. It is inaccurate to say spread syntax is related to colons as delimiters.

> But when we use the spread operator inside a JSX element, in the resultant HTML, how do the key value pairs get spread with = as the delimiter between the key and the value?

The premise here is based on a misconception. Spread syntax is completely different from JSX's syntax for forwarding props. They only look similar but have different functionality. You can already see from transpiling the code that forwarding props can be transformed to calls to React.createElement. In fact, all JSX can be transpiled to nested calls of React.createElement.