What do round brackets mean here? React Hook Form-CodePudding

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

CodePudding user response：

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