Why does createContainer use this.props over this.state?

1

I’m curious as to why createContainer throws your data into this.props over this.state. Having the data in this.state seems like the natural choice when working with this data in React.

This question was brought about when I was using some mock data to render a component. For example:

Board.propTypes = {
  data: PropTypes.array.isRequired,
};

export default createContainer(() => {
    //Returns some fake data.
	let dummy = [
		{ name: "John Smith", items: ["one", "two"]},
		{ name: "Jack Smith", items: ["one", "two"]},
		{ name: "Amy Smith", items: ["one", "two"]}
	]
  return {
    data: dummy,
  };
}, Board);

I then had a simple function being called on click, where I wanted to push some data into an object’s items array. This wouldn’t really work with something like this.props.data[0].items.push("hello"), but it would work if this data was kept in this.state.

I partially understand why this.props is used, which is that createContainer() creates a Higher Order Component, which in turn passes it’s data down via props, but i’m hoping someone can elaborate on this whole architecture and the reasoning behind it.

1 Like
2

You can just put this.props.data in your Board state if you really need so .
The architecture is explained in the guide in the part about reusable vs smart component (here).
Anyway, pushing items in an array returned by createContainer (which should depend on a reactive data source, otherwise there is no reason to use createContainer) does sound like a code smell, you should probably update the data source instead.

3

I agree on your last point, however as mentioned this was simply dummy data for testing.

I assume the best way to push the passed in props to state would be in something like componentWillReceiveProps().

4

Well, the architecture is probably not really designed to have dummy data passed from createContainer.
Anyway, componentWillReceiveProps(). will be triggered on update, you should initialize the state in the constructor first.