REACTJS: Change state in another class

Question

I have two file Reactjs
file1.js

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        selection: null
    };

file2.js

class SearchBar extends Component {
InputChange = () => {
    console.log(App.state);
}}

I want to use and change state of class App when using class SearchBar, i imported the file2 to file1. Thank you! My English is not good.

Answer 1

This is easy :D you just need to pass in the function that changes the state like so:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data: [],
        selection: null
  };

  changeStuff(paramsIfAny) {
    this.setState(/* whatever you want */);
  }

  render() {
    .....
     <SearchBar changeHandler={this.changeStuff.bind(this)} />
    .....
  }
}

And then on your SearchBar component

class SearchBar extends Component {
InputChange = (params) => {
   this.props.changeHandler(params);
}}

This was really abbreviated code to simplify what I meant. I hope you got how it is done!