title: ReactJS: Why isn't my component's state changing with new props?
body: <p>I have a header with links that each lead to a different gallery viewer, so I want each gallery to exhibit a unique default large image upon rendering. The parent component below is responsible for obtaining the index of the gallery that was clicked from a child component and passes an image to another child.</p>
  
  <pre><code>class App extends Component {
  
    constructor(props) {
  
      super(props);
  
      this.state = {
  
        onViewIndex: -1,
        defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"
      }
  
      this.handlePickerClick = this.handlePickerClick.bind(this);
  
    }
  
    handlePickerClick(index) {
  
      this.setState({onViewIndex: index});
  
      if(index == 1) {
  
        this.setState({defaultImageLarge: "./images/sala-large/04_sl02_BB.jpg"});
        console.log("changed large image to sala");
  
      }
  
      else if(index == 2) {
  
        this.setState({defaultImageLarge: "./images/qto-large/04_qt01_BB.jpg"});
        console.log("changed large image to " + this.state.defaultImageLarge);
  
      }
  
      else if(index == 3) {
  
        this.setState({defaultImageLarge: "./images/hall-large/04_det03_BB.jpg"});
        console.log("changed large image to " + this.state.defaultImageLarge);
  
      }
  
      else if(index == 4) {
  
        this.setState({defaultImageLarge: "./images/ban-large/04_ban01_BB.jpg"});
        console.log("changed large image to " + this.state.defaultImageLarge);
  
      }
  
    }
  
    render() {
      return (
  
          &lt;div id = "page-container" align = "center"&gt;
  
            &lt;Header /&gt;
            &lt;Banner /&gt;
            &lt;div className = "section-header"&gt;&lt;h2 className = "section-header-text"&gt;PORTFOLIO&lt;/h2&gt;&lt;/div&gt;
            &lt;GalleryPicker onClick = {this.handlePickerClick}/&gt;
            &lt;GalleryView onView = {this.state.onViewIndex} imageLarge = {this.state.defaultImageLarge}/&gt;
  
          &lt;/div&gt;
        );
    }
  }
  </code></pre>
  
  <p>My GalleryView component receives the correct image from the imageLarge prop, but won't update its state with it:</p>
  
  <pre><code>class GalleryView extends Component {
  
      constructor(props) {
  
          super(props);
  
          this.getImageList = this.getImageList.bind(this);
          this.changeImage = this.changeImage.bind(this);
  
          this.state = {
  
              imageLarge: this.props.imageLarge
          }
      }
  
      changeImage(address) {
  
          this.setState({imageLarge: address})
      }
  
      getImageList(index) {
  
          //SALAS
          if(index == 1) {
  
              return (
  
                  &lt;div&gt;
  
                      &lt;div id = "gallery-list-container"&gt;
  
                          &lt;ul className = "list-view"&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/04_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/04_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/04_sl03_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/04_sl03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/04_sl04_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/04_sl04_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/05_sl01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/05_sl01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/05_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/05_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/13_sl01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/13_sl01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/13_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/13_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/13_sl03_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/13_sl03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/13_sl04_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/13_sl04_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/13_sl05_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/13_sl05_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                          &lt;br/&gt;
  
                          &lt;ul className = "list-view"&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/14_sl01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/14_sl01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/14_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/14_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/14_sl04_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/14_sl04_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/15_sl01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/15_sl01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/15_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/15_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/15_sl03_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/15_sl03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/16_sl01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/16_sl01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/16_sl02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/16_sl02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/16_sl03_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/16_sl03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/sala-small/16_sl04_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/sala-large/16_sl04_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                      &lt;/div&gt;
  
                      &lt;ImageOnView imgSrc = {this.state.imageLarge} /&gt;
  
                  &lt;/div&gt;
  
                  );
  
          }
  
          //QUARTOS
          else if(index == 2) {
  
              alert(this.props.imageLarge);
              alert(this.state.imageLarge);
  
              return (
  
                  &lt;div&gt;
  
                      &lt;div id = "gallery-list-container"&gt;
  
                          &lt;ul className = "list-view"&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/qto-small/04_qt01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/qto-large/04_qt01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/qto-small/04_qt02_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/qto-large/04_qt02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/qto-small/14_qt01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/qto-large/14_qt01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/qto-small/16_qt01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/qto-large/16_qt01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/qto-small/17_qt01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/qto-large/17_qt01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                      &lt;/div&gt;
  
                      &lt;ImageOnView imgSrc = {this.state.imageLarge} /&gt;
  
                  &lt;/div&gt;
  
                  );
          }
  
          //HALL
          else if(index == 3) {
  
              alert(this.props.imageLarge);
  
              return (
  
                  &lt;div&gt;
  
                      &lt;div id = "gallery-list-container"&gt;
  
                          &lt;ul className = "list-view"&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/04_det03_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/04_det03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/04_det04_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/04_det04_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/16_det03_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/16_det03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/17_det01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/17_det01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/18_det01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/18_det01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;br/&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/04_ee01_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/04_ee01_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/05_ee02_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/05_ee02_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/05_ee03_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/05_ee03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                              &lt;li className = "list-view-item"&gt;
                                      &lt;img src = {require("./images/hall-small/14_sl03_SS.jpg")}
                                      onClick = {() =&gt; this.changeImage('./images/hall-large/14_sl03_BB.jpg')}/&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                      &lt;/div&gt;
  
                      &lt;ImageOnView imgSrc = {this.state.imageLarge} /&gt;
  
                  &lt;/div&gt;
  
                  );          
          }
  
          //BANHEIROS
          else if(index == 4) {
  
  
              return (
  
                  &lt;div&gt;
  
                  &lt;div id = "gallery-list-container"&gt;
  
                      &lt;ul className = "list-view"&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_ban01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_ban01_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_ban03_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_ban03_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_ban04_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_ban04_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_ban05_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_ban05_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_det01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_det01_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;br/&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_det02_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_det02_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/04_det09_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/04_det09_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/14_ban01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/14_ban01_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                          &lt;li className = "list-view-item"&gt;
                                  &lt;img src = {require("./images/ban-small/18_ban01_SS.jpg")}
                                  onClick = {() =&gt; this.changeImage('./images/ban-large/18_ban01_BB.jpg')}/&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
                  &lt;ImageOnView imgSrc = {this.state.imageLarge} /&gt;
  
                  &lt;/div&gt;
  
                  );          
          }
      }
  
      render() {
  
          return (
  
                  &lt;div&gt;
  
                      &lt;div id = "gallery-view-container"&gt;
  
                          {this.getImageList(this.props.onView)}
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              );
  
      }
  }
  </code></pre>
  
  <p>What seems to be the problem here?</p>