CODEWITHSUNDEEP
javascriptreactjscomponents
canemarcovaro
canemarcovaro

Reputation: 33

React - How to change the props of a child component when an event happens?

I have a component called Nav. I want send props to another component called Body when the user use types in a search bar. The issue I'm having is that the value in the Body component does not change when I type in the search bar.

The Nav class: 

constructor(props) {
  super(props);
  this.state = { id: "" };

  this.handleChange = this.handleChange.bind(this);
}

handleChange = event => {
  this.setState({ id: event.target.value });
};

render() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon" />
        </button>

        <a className="navbar-brand" href="#">
          <img src="https://icon-icons.com/icons2/1412/PNG/48/comics-spiderman-cam_97492.png" />
          Home
        </a>

        <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <a className="nav-link" href="#">
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                Link
              </a>
            </li>
            <li className="nav-item">
              <a
                className="nav-link disabled"
                href="#"
                tabindex="-1"
                aria-disabled="true"
              >
                Disabled
              </a>
            </li>
          </ul>
          <form
            className="form-inline my-2 my-lg-0"
            onSubmit={() => {
              console.log(this.state.id);
            }}
          >
            <input
              className="form-control mr-sm-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
              value={this.state.id}
              onChange={this.handleChange}
            />
            <button className="btn btn-light" type="submit">
              Search
            </button>
          </form>
        </div>
      </nav>
      <Body valorId={this.state.id} />
      {alert(this.state.id)}
    </div>
  );
}

The body class:

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 });
}

Thank you.

Upvotes: 0

Views: 353

Answers (2)

Maxime Girou
Maxime Girou

Reputation: 1570

The problem is that you use componentDidMount This function is called one time, at the mount of the component.

Try to use componentDidUpdate instead

Upvotes: 1

Tholle
Tholle

Reputation: 112777

componentDidMount will only run when the component is first mounted. You could instead move the logic to a separate method and call that both in componentDidMount and in componentDidUpdate when the valorId prop changes.

Example

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = { heroe: null, loading: true };
  }

  componentDidMount() {
    this.loadHeroe();
  }

  componentDidUpdate(prevProps) {
    if (this.props.valorId !== prevProps.valorId) {
      this.loadHeroe();
    }
  }

  loadHeroe = async () => {
    this.setState({ loading: true });

    const url = "https://superheroapi.com/api/2132321/" + this.props.valorId;
    const response = await fetch(url);
    const data = await response.json();

    this.setState({ heroe: data, loading: false });
  };

  render() {
    // ...
  }
}

Upvotes: 4

Related Questions