reactjs ES6: Unable to understand the syntax

Question

I am going through reactj hook forms and I find this syntax

<input {...register("firstName")} />

But how to understand this

I generally can understand the below syntax

<input myProp={something} />

Answer 1

The spread syntax is a way to expand an object or an array inline.

I'm assuming you're using react-hook-form (though I could be wrong!) - in that case, the register function returns an object that looks like { onChange, onBlur, name, ref }. Therefore, this

<input {...register("firstName")} />

is the same as

const { onChange, onBlur, name, ref } = register("firstName");
// the above, in case you're also unfamiliar with destructuring, would be the same as
// const registerResult = register("firstName");
// const onChange = registerResult.onChange;
// etc.
<input onChange={onChange} onBlur={onBlur} name={name} ref={ref} />