title: Rerender React component when props change?
body: <p>I have a react component with a Mobx store that looks like this:</p>
  
  <pre><code>class Board extends Component {
    componentDidMount() {
      this.props.dataStore.getSinglePlayer(1)
      this.props.squareStore.getAllSquares()
    }
  
    componentWillReceiveProps(nextProps) {
      if (
        this.props.dataStore.currentPlayer !==
        this.nextProps.dataStore.currentPlayer
      ) {
        this.nextProps.dataStore.getSinglePlayer(1)
      }
    }
  
    randomNumber() {
      return Math.floor(Math.random() * 6) + 1
    }
  
    roll(playerId, playerPosition) {
      let dice1 = this.randomNumber()
      let dice2 = this.randomNumber()
  
      let totalRoll = dice1 + dice2
      let totalPosition = totalRoll + playerPosition
      this.props.dataStore.changeUserPosition(playerId, totalRoll)
      document.getElementById('dice').innerHTML =
        'You rolled ' + totalRoll + '!  You are now on ' + totalPosition
    }
  
    render() {
      var player = {
        name: '',
        id: '',
        position: 0
      }
      console.log(this.props.dataStore.currentPlayer)
      if (this.props.dataStore.currentPlayer) {
        var currentPlayer = this.props.dataStore.currentPlayer
        player = {
          name: currentPlayer.name,
          id: currentPlayer.id,
          position: currentPlayer.position
        }
      }
      if (this.props.squareStore.squares) {
        var squares = this.props.squareStore.squares.map((square, i) =&gt; {
          var movement
  
          if (i == player.position) {
            movement = **
          }
          return (
            &lt;li key={i}&gt;
              &lt;span&gt;
                {square.title}
                &lt;br /&gt;
                {movement}
                {square.price}
              &lt;/span&gt;
            &lt;/li&gt;
          )
        })
      } else {
        squares = &lt;h4&gt;Squares being loaded...&lt;/h4&gt;
      }
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Player: {player.name}&lt;/h1&gt;
          &lt;h2&gt;Roll Dice!&lt;/h2&gt;
          &lt;button onClick={() =&gt; this.roll(player.id, player.position)}&gt;
            Roll
          &lt;/button&gt;{' '}
          &lt;h1 id="dice"&gt;{}&lt;/h1&gt;
          &lt;div className="board"&gt;
            &lt;ul&gt;{squares}&lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default inject('dataStore', 'squareStore')(observer(Board))
  </code></pre>
  
  <p>When the button is clicked this.props.dataStore.currentPlayer.position updates with a new value.  However this new value only shows up when the page is manually refreshed.   Is there a way of telling the component that the value has changed and it should rerender automatically?</p>