title: ReactJS why will this state change not render? What am I doing wrong?
body: <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';
  
  var mode=['recent', 'alltime'];
  
  var Button = React.createClass({
    render(){
      return &lt;input type={this.props.type} onClick=    {this.props.onClick} text={this.props.val}/&gt;;
    }
  });
  
  class Header extends React.Component {
    constructor(){
      super()
    }
  
    render(){
      return &lt;h2&gt;Free Code Camp Leader board&lt;/h2&gt;
    }
  }
  
  class Leader extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        users: [],
        val: props.m,
      }
    }
  
    componentDidMount() {
      var th =this;
      this.serverRequest = axios.get("https://fcctop100.herokuapp.com/api/fccusers/top/"+this.state.val).then(function(result){
        console.log(result.data);
        var leaders = result.data;
        this.setState({
          users: leaders
        });
      }.bind(this));
    }
  
    componentWillUnmount() {
      this.serverRequest.abort();
    }
  
    render(){
      return (
        &lt;div className='container'&gt;
  
          &lt;div className="tbl"&gt;
            &lt;table className="table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Recent &lt;/th&gt;
                  &lt;th&gt;Alltime&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {this.state.users.map(function(data, index){
                  return (&lt;tr key={index}&gt;&lt;td&gt;&lt;img src={data.img}    className="img img-thumbnail" width="50"/&gt;{data.username}&lt;/td&gt; 
                  &lt;td id='recent'&gt;{data.recent}&lt;/td&gt; 
                  &lt;td id='alltime'&gt;{data.alltime}&lt;/td&gt;&lt;/tr&gt;)
                })}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  class App extends React.Component{
    constructor(){
      super(),
      this.state={val: mode[0]},
      this.update= this.update.bind(this),
      this.unmount=this.unmount.bind(this)
    }
  
    unmount(){
      ReactDOM.unmountComponentAtNode(document.getElementById('board'))
    }
  
    update(){
      this.unmount();
      this.setState({val: this.state.val ===mode[0]? mode[1] : mode[0]});
    }
  
    render(){
      return (
        &lt;div&gt;
          &lt;div className='header'&gt;
            &lt;Header /&gt;
            &lt;button  onClick={this.update}  &gt;{this.state.val==mode[0]? mode[1] : mode[0]}&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="board"&gt;
            {this.state.val === mode[0]? &lt;Leader m= {this.state.val} /&gt; : this.state.val ===
              mode[1] ? &lt;Leader m= {this.state.val} /&gt; : null}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The questionable part is under class App extends React.Component. I am trying to re-render the Leader Component with the state change in the update method. it changes states, but then does not change the property passed to Leader to rerender.</p>