wProps updating in react dev tools but conditional jsx not rendering correctly

I’m having trouble understanding why my child component is not updating it’s conditional JSX from the renderFace method despite the prop values being updated in react dev tools and the value of the element being targeted also updating ("data-icon" value in photos 3&4).

initial null value of fetched props

populated prop values after fetched data

initial prop value

updated prop value after state is fetched / updated

As you can see from the photos the data is updating in the dev tools but the frown doesn’t turn upside down despite props value updating.

SearchBar is the child component of App

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      businesses: []
    };
  }

searchYelp(term, location, sortBy) {
    Yelp.search(term, location, sortBy).then(businesses => {
      this.setState({businesses: businesses});
    });
  }

  render() {
    return (
      <div className="App">
        <SearchBar 
          businesses={this.state.businesses} 
          searchYelp={this.searchYelp.bind(this)} />
      </div>
    );
  }
}
class SearchBar extends React.Component {
  constructor(props) {
    super(props);

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

 renderFace(){
    return (
    this.props.businesses == 0
      ? <h1>Hangry <span className="iconify" data-icon="clarity:sad-face-solid" data-inline="false"></span></h1>
      : <h1>Hangry <span className="iconify" data-icon="bx:bxs-happy-alt" data-inline="false"></span></h1>
    )
  }

handleSearch(event) {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    event.preventDefault();
  }

 componentDidUpdate(){
    this.renderFace();
  }

 return (
      <div className="SearchBar">
        {this.renderFace()} 
      </div>
 )

}

4 thoughts on “wProps updating in react dev tools but conditional jsx not rendering correctly”

Leave a Comment