react how to call state variable from another class?

Question

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.

Answer 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 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.