Search.js

class Search extends Component {
  constructor() {
    super();
    this.state = {
      selectedPictures: []
    }
  }

  static getSelectedPictures = () => {
      return this.state.selectedPictures;
  }

  render() {
    return (
      <div>
        ...
      </div>
    );
  }


}

export default Search;

Other.js

import Search from './Search';

class Other extends Component {
      constructor() {
        super();
        this.state = {

        }
      }


     render() {
       console.log(Search.getSelectedPictures); --> Uncaught null
       return (
         <div>
           ...
        </div>
        );
     }
    }

export default Other;

How to call Search.state.selectedPictures inside Other.js?

I already try to use static method to return this.state.selectedPictures and call in Other.js, but cannot access.

Any way can import or transfer the var? Both js files are separate files

Thank you.

Search.js

class Search extends Component {
  constructor() {
    super();
    this.state = {
      selectedPictures: []
    }
  }

  static getSelectedPictures = () => {
      return this.state.selectedPictures;
  }

  render() {
    return (
      <div>
        ...
      </div>
    );
  }


}

export default Search;

Other.js

import Search from './Search';

class Other extends Component {
      constructor() {
        super();
        this.state = {

        }
      }


     render() {
       console.log(Search.getSelectedPictures); --> Uncaught null
       return (
         <div>
           ...
        </div>
        );
     }
    }

export default Other;

How to call Search.state.selectedPictures inside Other.js?

I already try to use static method to return this.state.selectedPictures and call in Other.js, but cannot access.

Any way can import or transfer the var? Both js files are separate files

Thank you.

• javascript
• reactjs

Share Improve this question Follow edited Dec 16, 2017 at 16:47 Donald Wu asked Dec 16, 2017 at 16:35 Donald WuDonald Wu 71677 silver badges2121 bronze badges 14

• Is Search.selectedPictures a function? It doesn't appear in your code. I assume you don't mean state.selectedPictures? – Matt Fletcher Commented Dec 16, 2017 at 16:37
• @MattFletcher I want to accessSearch.state.selectedPictures in Other.js – Donald Wu Commented Dec 16, 2017 at 16:38
• Ah you confused me by using the term "call", like it's a function. – Matt Fletcher Commented Dec 16, 2017 at 16:40
• 1 What is the relationship between Search and Other? Is one a child ponent of the other? Are they siblings? Most likely you need to move the state up to a mon parent that can then pass it down in props. – Code-Apprentice Commented Dec 16, 2017 at 16:41
• 1 Yeah. Search by itself is a class, not a constructed object. You can't just call methods or get properties from it before it's instantiated. And React's method of instantiation means you can't just do new Search(), so you'd probably need to have <Other /> be a child of <Search />, or share a mon parent like C-A says – Matt Fletcher Commented Dec 16, 2017 at 16:43

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 1

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 ponents, you have to use the <Search/> ponent 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 ponent, and keep the state in there. Then pass that state to both ponents simultaneously, if the ones you list are not meant to have a parent-child relationship.

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

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 />