CODEWITHSUNDEEP
reactjsreact-props
jon
jon

Reputation: 1581

How to destructure component props if they aren't always present

I have a Form component that gets both 'values' and 'errors' as props from its parent. I am using remix run, so I don't need to keep the props as state. I also don't always need to pass down errors as one of the props.

const Form = ({values,errors}) => {
...
}

Is there a way to use the spread operator to only destructure props being passed down, or should i simply be passing an empty value for errors anyway? Thanks!

Upvotes: 1

Views: 589

Answers (3)

Mayke Fernandes dos Santos
Mayke Fernandes dos Santos

Reputation: 1

A common pattern is to have errors as an empty array by default ( since there maybe be more than one ) in case there are no errors. But there are also libraries that implement it as undefined when nothing went wrong, it really depends on the situation. In the case of form validations see: https://formik.org/docs/api/formik#errors--field-string-string- to understand how some libraries approach that.

Upvotes: 0

jon
jon

Reputation: 1581

Thanks for the responses (they helped me get to the answer), I had thought that if I tried to destructure the props and they hadn't been set by the parent it would cause errors, but that doesn't seem to be the case.

Parent:

<Form cat="Tom" />

Form component:

const Form = ({cat,dog,hamster,rabbit}) => {
  if (dog !== undefined) {
    // do something
  }
}

Upvotes: 1

Anton Podolsky
Anton Podolsky

Reputation: 850

You can assign a default value:

const Form = ({values,errors} = {}) => {
...
}

Upvotes: 2

Related Questions