title: React - How to change the props of a child component when an event happens?
body: <p>I have a component called <em>Nav</em>. I want send props to another component called <em>Body</em> when the user use types in a search bar. The issue I'm having is that the value in the <em>Body</em> component does not change when I type in the search bar.</p>
  
  <p>The Nav class: </p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = { id: "" };
  
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange = event =&gt; {
    this.setState({ id: event.target.value });
  };
  
  render() {
    return (
      &lt;div&gt;
        &lt;nav className="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
          &lt;button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03"
            aria-expanded="false"
            aria-label="Toggle navigation"
          &gt;
            &lt;span className="navbar-toggler-icon" /&gt;
          &lt;/button&gt;
  
          &lt;a className="navbar-brand" href="#"&gt;
            &lt;img src="https://icon-icons.com/icons2/1412/PNG/48/comics-spiderman-cam_97492.png" /&gt;
            Home
          &lt;/a&gt;
  
          &lt;div className="collapse navbar-collapse" id="navbarTogglerDemo03"&gt;
            &lt;ul className="navbar-nav mr-auto mt-2 mt-lg-0"&gt;
              &lt;li className="nav-item active"&gt;
                &lt;a className="nav-link" href="#"&gt;
                  &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;a className="nav-link" href="#"&gt;
                  Link
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;a
                  className="nav-link disabled"
                  href="#"
                  tabindex="-1"
                  aria-disabled="true"
                &gt;
                  Disabled
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;form
              className="form-inline my-2 my-lg-0"
              onSubmit={() =&gt; {
                console.log(this.state.id);
              }}
            &gt;
              &lt;input
                className="form-control mr-sm-2"
                type="search"
                placeholder="Search"
                aria-label="Search"
                value={this.state.id}
                onChange={this.handleChange}
              /&gt;
              &lt;button className="btn btn-light" type="submit"&gt;
                Search
              &lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
        &lt;Body valorId={this.state.id} /&gt;
        {alert(this.state.id)}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The body class:</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = { heroe: null, loading: true };
  }
  
  async componentDidMount() {
    const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
    console.log("aca va:" + this.props.valorId);
    alert(url);
    const response = await fetch(url);
    const data = await response.json();
    console.log(data.name);
    this.setState({ heroe: data, loading: false });
  }
  </code></pre>
  
  <p>Thank you. </p>