React : cannot add property 'X', object is not extensible

Question

I am receiving props in my component. I want to add a property 'LegendPosition' with the props in this component. I am unable to do that. Please help me with this. I have tried this code yet but no success:

var tempProps     = this.props;
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

Solution 1

You can't modify this.props. Here tempProps is reference of this.props so it does not work. You should create a copy of the props using JSON.parse() and JSON.stringify()

var tempProps = JSON.parse(JSON.stringify(this.props));
tempProps.legendPosition = 'right';
Object.preventExtensions(tempProps);

console.log(tempProps);

For a better and efficient way to deep clone object see What is the most efficient way to deep clone an object in JavaScript?

Solution 2

props is not mutable, you cant "add" anything to them. if you want to "copy" them then you need to do

const tempProps = {...this.props};

And the only reason i can see you needing to add more props is to pass it down to a child, but you can do that without adding it to the props object.

EDIT: add props with extra prop

<Component {...this.props} legendPosition="right" />

Solution 3

below in tempProps object spread operator copy your this.props object and after spread operator we can add new object property or we can update existing object property.

var tempProps = {
  ...this.props,
  tempProps.legendPosition = 'right' //property you want to add in props object
};

Solution 4

I want to send the updated props to a child component, If it is possible without copying or cloning to a new object, Please help me how can I achieve this.

Solution is as simple as:

<ChildComponent {...this.props} legendPosition="right" />

Of course legendPosition will be available in ChildComponent by this.props.legendPosition.

Of course earlier this.props can contain already legendPosition property/value which will be overwritten by defined later - order matters.

Of course there can be many spread operators - for multiple properties, logic blocks ... whatever:

const additonalProps = {
  legendPosition: 'right',
  sthElse: true
}
return (
  <ChildComponent {...this.props} {...additonalProps} />
)

Solution 5

Your answer is in this line.

var tempProps = this.props;

this.props is immutable that means you can not change the property value in function. you can use a this.state so you can modify it in your function

1. props --- you can not change its value.
2. states --- you can change its value in your code, but it would be active when a render happens.

View more solutions

Comments

[Niraj Kaushal]

Look here stackoverflow.com/a/24943743/4650675

[Joey]

note: this is a shallow copy, I wouldn't advise NOT doing a deep copy since it messed up any kind of optimisations react would attempt.

[Ronit Mukherjee]

has provided a better way of copying the object.

[Andreas]

So instead of closing it as a duplicate you're adding one of the answers from said duplicate as your own...

[Maheer Ali]

@Andreas The question is not how to copy the object. The question is why props without cloning doesnot mutate. If he would have visited the question he would have this problem solved

[Ankit Kaushal]

@Joey Yes, I want to send the updated props to a child component, If it is possible without copying or cloning to a new object, Please help me how can I achieve this.

[Ankit Kaushal]

@MaheerAli your code was working, but my child component not getting the updated props. I don't know why. Please check your edited answer

[Maheer Ali]

@AnkitKaushal You can't change props. props can only be updated by the parent of the component. You can change tempProps and use tempProps inside render method or where ever you want to display the props

[Ankit Kaushal]

Okay. @MaheerAli . I will try to use tempProps then. Thank you for your help