ReactJS - ES6 class - call super() with augmented properties

Question

This is what I would like to do:

constructor(props, store) {
  props.store = store;
  super(props);
};

I get the following error:

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

I understand that properties are immutable in ReactJS. So how can I clone, then augment the existing properties?

UPDATE 1

Some background: I'm basically trying to avoid a this._store "private" variable, and would rather have it in the props, since the value is known at object creation time and will not change.

My class hierarchy is as follows:

import SpeakersStore from ...;
class SpeakersViewController extends ItemsViewController {
  constructor(props) {
    super(props, SpeakersStore);
  };
  ...
};

class ItemsViewController extends React.Component {
  constructor(props, store) {
    props.store = store;
    super(props);
  };
  ...
};

What is the scenario here? I don't think that you can do such a thing in React. But I can imagine that there is a way around the problem. — Willem Meints
– Willem Meints, Commented Feb 16, 2016 at 16:05
Why not pass the store as another prop from the parent component or React.createElement call? — nbermudezs
– nbermudezs, Commented Feb 16, 2016 at 16:09

rossipedia · Accepted Answer · 2016-02-16 18:22:32Z

2

You should be able to do the following:

constructor(props, store) {
  super({...props, store});
}

If you're in an environment where the object spread operator (the {...props} construct) is not available, then you can use Object.assign:

constructor(props, store) {
  super(Object.assign({}, props, {store});
}

However, if this is a constructor for a React component, be aware that the second argument to the constructor for React.Component is context, and you won't get the behavior you're looking for.

edited Feb 16, 2016 at 18:22

answered Feb 16, 2016 at 16:43

rossipedia

59.8k10 gold badges95 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

loganfsmyth Over a year ago

Better to use Object.assign since this question mentioned nothing about ES7 or Babel.

Eric Sellin Over a year ago

I'm using Babel so no worries about spreads... Your code makes sense and looks like it should work, but I still end up with the same props, i.e. without my extra store.

rossipedia Over a year ago

Gonna need more info then. How is your class being constructed? Is it a React component? (If so, see my last paragraph above). How is the store being constructed?

Collectives™ on Stack Overflow

ReactJS - ES6 class - call super() with augmented properties

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related