Question in short:
What is the difference between these two versions:
const A = ({ children, ...rest }) => React.cloneElement(children, rest);
vs
const B = ({ children, ...rest }) => React.cloneElement(children, {...rest});
Both versions seem to work the same way.
This version does not work:
const C = ({ children, ...rest }) => React.cloneElement(children, { rest });
Question in more detail:
...rest vs rest
...rest that is declared in the component function definition acts as rest parameters syntax represents the rest of the props passed down to the component .
eg: const B = ({ children, ...rest })
However, ...rest that is passed as an argument:
eg: React.cloneElement(children, {...rest})
represents spread syntax. Here it seems we are also simply cloning children element with the same props from the component function definition.
But how does component A work?
const A = ({ children, ...rest }) => React.cloneElement(children, rest);
How did we get from ...rest to rest?
Finally, why does it NOT work when surrounded with brackets like component C
I've read documentation on React and documentation on ES6 but there isn't great documentation for use of them together using React APIs.