Here is a custom input component
const Input = ({props}) => {
return (
<input type="text" {...props} {...props.reg}/>
);
};
I passed a React Hook Form register function to this custom Input.
<Input props={{
placeholder: 'Name',
id: 'form__name',
name: 'name',
reg: {...(register('name'), {required: true})}
}}/>
Input was registered and I was not able to figure out what do round brackets before the spread operator mean.
What kind of JS/React syntax is it? ...(xxx, xxx)
P.S. this line of code
reg: {...(register('name'), {required: true})}
was taken from some youtube video, I just rewrote it, but round brackets before spread operator were still used in the video
The comma operator is rarely used in this way but essentially, if you do this
statment1, statement2
Then the second statement is returned. However, statment1 is executed, just not returned.
Here its used to register the field but the result of the statement inside the brackets is actually just {required: true}.
The brackets themselves just enclose this inner comma statement. The inside of the brackets is evaluated first, and the result of that is then spread.
More info here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator