title: React.js child state not re-rendering even after calling setState?
body: <p>I have an app with one child component that I would like to re-render when setState updates the bookInput in the parent's state. I am using axios to request info from google's book api. For some reason, even though the state is updating, the child is not re-rendering. Please help if you can! Thank you!</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        bookInput: 'ender',
        bookSubmitted: 'initial'
      }
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleSubmitEmpty = this.handleSubmitEmpty.bind(this);
    }
  
      handleChange(e) {
      this.setState({bookInput: e.target.value});
      console.log(this.state.bookInput);
      //this.setState({bookSubmitted: false});
    }
  
    handleSubmit(e) {
      e.preventDefault();
      //this.setState({bookSubmitted: true})
      const name = this.state.bookInput;
      this.setState({bookInput: name});
      console.log(this.state);
      this.setState({bookSubmitted: 'userSub'});
    }
  
    handleSubmitEmpty(e) {
      alert('please enter an item to search for');
      e.preventDefault();
    }
  
    render() {
  
      return (
  
        &lt;div className="App"&gt;
          &lt;header className = "App-header"&gt;
            &lt;h1&gt;Book Search App&lt;/h1&gt;
          &lt;/header&gt;
  
          &lt;form className = "form-style" onSubmit = {this.state.bookInput ? this.handleSubmit: this.handleSubmitEmpty}&gt;
            &lt;label&gt;
              &lt;input type="text" className = "input-style" 
                value = {this.state.bookInput} onChange = {this.handleChange}&gt;
              &lt;/input&gt;
            &lt;/label&gt;
            &lt;button type="submit"&gt;search books&lt;/button&gt;
          &lt;/form&gt;
          {/* &lt;Book bookInput = {this.state.bookInput}/&gt; */}
          {/*this.state.bookSubmitted &amp;&amp; &lt;Book bookInput = {this.state.bookInput}/&gt;*/}
          {
            (this.state.bookSubmitted === 'initial' || this.state.bookSubmitted === 'userSub') &amp;&amp; 
            &lt;Book bookInput = {this.state.bookInput}/&gt;
          } 
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  
  class Book extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        //bookInput2: "ender",
        bookTitles: [],
        bookExample: '',
        isLoading: false
      }
  
      this.bookClick = this.bookClick.bind(this);
    }
  
    bookClick(book) {
      console.log(book);
      console.log(book.volumeInfo.infoLink);
      const bookURL = book.volumeInfo.infoLink;
      window.open(bookURL);
    }
  
    componentDidMount() {
      //this.setState({ isLoading: true });
      this.setState({isLoading: true});
      axios.get(`https://www.googleapis.com/books/v1/volumes?q=${this.props.bookInput}`)
        .then((response) =&gt; {
          const bookExample1 = response.data.items;
          console.log(bookExample1);
          this.setState({bookTitles: bookExample1, isLoading: false});
        })
        .catch((error) =&gt; {
          console.error('ERROR!', error);
          this.setState({isLoading: false});
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          { this.state.bookTitles ? (
            &lt;div&gt;
              &lt;h2&gt;book list&lt;/h2&gt;
              {&lt;ul className = 'list-style'&gt;
                {this.state.isLoading &amp;&amp; 
                  (&lt;div&gt;
                    loading book list
                  &lt;/div&gt;)
                }
                {this.state.bookTitles.map(book =&gt; (
                  &lt;li key={book.id}&gt;
                    &lt;span className = 'book-details book-title' onClick = {() =&gt; this.bookClick(book)}&gt; {book.volumeInfo.title}&lt;/span&gt;
                    &lt;br/&gt;
                    {book.volumeInfo.imageLinks &amp;&amp; 
                      &lt;img src = {book.volumeInfo.imageLinks.thumbnail}/&gt;
                    }
                    { book.volumeInfo.description &amp;&amp; 
                      &lt;span className = 'book-details'&gt;{book.volumeInfo.description}&lt;/span&gt;
                    }
                    &lt;br/&gt;
                    &lt;span className = 'book-details'&gt;Categories {book.volumeInfo.categories}&lt;/span&gt;
                  &lt;/li&gt;
                ))}
              &lt;/ul&gt;}
          &lt;/div&gt;) :
          (&lt;p&gt;sorry, that search did not return anything&lt;/p&gt;)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>