They say you shouldn't modify the props in a React Component. Does that extend to modifying them in the constructor?

Specifically,

export default class BookingForm extends React.Component {

    constructor(props) {
        // am I allowed to modify `props` here?
        super(props);
    }
}

To be perfectly clear, I'm aware that JavaScript will allow me to do so, I'm asking if this is a bad design pattern that will cause me headache in the future.

I want to re-format some of the props upon initialization; they won't change again after that.

They say you shouldn't modify the props in a React Component. Does that extend to modifying them in the constructor?

Specifically,

export default class BookingForm extends React.Component {

    constructor(props) {
        // am I allowed to modify `props` here?
        super(props);
    }
}

To be perfectly clear, I'm aware that JavaScript will allow me to do so, I'm asking if this is a bad design pattern that will cause me headache in the future.

I want to re-format some of the props upon initialization; they won't change again after that.

• javascript
• reactjs

• What is the point if the constructor only invoked once during the whole component lifecycle? – zerkms Commented Jun 15, 2016 at 4:08
• @zerkms What do you mean? What's the point of any const? There's plenty of reasons to modify or set things once and only once. – mpen Commented Jun 15, 2016 at 4:09
• I mean - there is no guarantee it will not be re-rendered immediately after the constructor is invoked and in that case your changes are never applied and effectively lost. So, what is the point of doing something that may never be used? – zerkms Commented Jun 15, 2016 at 4:10
• 2 discuss.reactjs.org/t/… "If you want to use this.props in the constructor, you need to pass props to super. Otherwise, it doesn't matter because React sets .props on the instance from the outside immediately after calling the constructor." – zerkms Commented Jun 15, 2016 at 4:16
• 1 @zerkms Okay...now we're getting somewhere. I didn't know my props would be overwritten. That answers my question then. Thank you! – mpen Commented Jun 15, 2016 at 4:19

2 Answers 2

To re-iterate what zerkms pointed out to me, the answer is no, you are not allowed to modify props, even in the constructor.

super() expects the exact same props that you were given, and even if you try to cheat the system by supplying something different, they will be overwritten immediately after the constructor. Ergo, you cannot modify this.props.

Even if you try to modify the props object to add an extra property, you will see an error like this:

TypeError: Can't add property bacon, object is not extensible

So you are literally unable the modify the props in the constructor, even if you wanted to.

However, you can set new [JavaScript] properties, e.g.

this.myReformattedProperty = format(props.oldProperty)

You cannot modify the props, not even in the constructor BUT you can modify a prop. Example:

constructor(props) {
  // This won't work. You will get "TypeError: Cannot add property aNewProp, object is not extensible" error.
  // props.aNewProp = 'someValue';
  // This won't work either. You will get "TypeError: Cannot assign to read only property 'anExistingProp' of object '#<Object>'" error.
  // props.anExistingProp = 'someValue';
  // However, this will work perfectly:
  props.anExistingProp.anExistingOrNewPropertyInThatProp = 'someValue';
  super(props);
}

render() {
  console.log('this.props are:');
  console.log(this.props);
  // The print-out includes the modifications that has been made to an existing prop.
}