CODEWITHSUNDEEP
reactjs
Santhosh
Santhosh

Reputation: 11774

reactjs ES6: Unable to understand the syntax

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} />

Upvotes: 1

Views: 48

Answers (1)

Brendan Bond
Brendan Bond

Reputation: 1890

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} />

Upvotes: 2

Related Questions