How do I update a component of another class in React?

Question

I’m new here at the forum and I’m studying Act and I came across a question..

I have the following files:

App.js

    class App extends Component {

      constructor(props) {
          super(props)
          this.state = {
            historico:[],
            isLoading: false
          }
          this.loadData = this.loadData.bind(this)
      }

      loadData() {
        this.setState({ isLoading: true })
        functions.loadHistorico()
          .then((res)=>{
            this.setState({historico: res}),
            console.log(this.state.historico)
          })
      }

      render() {
          return (
              <li className="dropdown">
                <a href="#" className="dropdown-toggle" data-toggle="dropdown"> Histórico <span className="caret"></span> </a>
                <ul className="dropdown-menu"> 
                  {this.state.historico.map(this.renderHistorico)}
                </ul>
              </li>
           )
      }


    }

and Home.js

class Home extends Component {
      //>>> aqui tem o constructor(props) {}  e componentDidMount() {} etc...

      pesquisarTermo() {
        functions.salvarHistorico(this.refs.termo.value)
        //app.loadData()  <=====
      }
 }

I’m creating a dropdown list using the map, but I want to update this list every time I call the search functionTerm() in Home.js.

How do I do that?

Answer 1

You must reference the App daughter class within the Parent class render.

import App from ../../App

class Home extends Component {
    render(){
        <App/>
    }
}

After that, there’s an example here of how to call the method: https://stackoverflow.com/questions/37949981/call-child-method-from-parent