Use flux architecture . The simple implementation is

alt flux

Just create an Action and a Store . When you select images just put them in the Store using Action then get them as props using <AltContainer />


What you're trying to do isn't really possible in React for a couple of reasons. First of all, you're trying to call methods and access properties on a class, not on an object. You would, in normal (modern) JS, be required to instantiate the class with the new keyword. For example, search = new Search(); search.getSelectedPictures() - this, however, isn't really how React works, and because your classes are actually components, you have to use the <Search/> component syntax in your render function.

As for getting access to the state in Search, you'd need to pass that state from Search to Other.

One way would be to pass the state into the props directly, so in search.js:

render() {
  <Other selectedPictures={this.state.selectedPictures} />

Then in other.js:

render() {
  this.props.selectedPicture.forEach((pic) => <img src={pic} />);

Alternatively, you could have a more umbrella parent component, and keep the state in there. Then pass that state to both components simultaneously, if the ones you list are not meant to have a parent-child relationship.

There are also, albeit slightly more complex, ways of doing what you wish but with Search as a child of Other, but without knowing what those two components actually are, it's hard to really tell.

Related Query

More Query from same tag