Use spread props with additional props

Question

How can I append another property? I have a react component where someone has passed in ...props and I want to append on an extra prop

 <AccountsStatus {...props} />

Answer 1

Bear in mind that the order in which you pass your props will determine which value is passed through to that component. This applies if there are two keys with the same name.

For example:

<AccountsStatus extraProp={extraValue} {...props} />

and

<AccountsStatus {...props} extraProp={extraValue} />

look the same, but in the first example, if you were spreading your props object which contained an extraProp key, it would overwrite the extraProp value you pass before it.