Best practice in assigning a new key/value pair into a nested object

Question

Im using React. and trying to assign an new key value. pair into the object. So first it goes through an if check and if it meets the requirement, I want to add the key value 'author'

if (field.component === 'Author') {
      this.props.writer.config.payload.name = 'Jefferson';
      console.log(this.props)
    }

There are some online articles that tell me to do this way and others that tell me to do Object.assign. Basically though, I just want to add the 'name':'Jefferson' into the object.

Is it an object stored in state? If so you don't want to add the property directly as it mutates the state in place, you should instead pass a new object with the added property to setState — pilchard, Jan 03 '22 at 21:30

score 0 · Answer 1 · edited Jan 03 '22 at 21:33

0

See this answer https://stackoverflow.com/a/24943743/1964636

Mutating props in a child component is an anti pattern, You may want to pass a function as props that can lift state in the child component.

Once you modify the state of it's parent component (assuming the props are part of the parent component's state), it will rerender with updated props.

edited Jan 03 '22 at 21:33

Randy Casburn

13,840
1
16
31

answered Jan 03 '22 at 21:32

Uzair Ashraf

1,171
8
20

Best practice in assigning a new key/value pair into a nested object

1 Answers1