React - Component styles not updating from props
<p>I'm currently have an issue where one of my components (<strong>ComponentThree</strong>) styles are not being updated, even though the props that are sent and the styles that are generated are in fact updating correctly.</p>

<p>I'm using the Parent-Child communication technique where I'm exposing a props function which my 2nd component can fire off against. My 3rd component is then ran off the states of the parent which is passed through to it as a prop. </p>

<p>Below is my code (excuse minor coding issues as I've had to rip this out and generalise):</p>

<pre><code>class ComponentOne extends React.Component {

  constructor(){
    super();
    this.state = {
      swipePosition: 0,
    };
  }

  handleSwipe(val, animate = false) {
    this.setState({
      swipePosition: val,
    });
  }

  render() {
    return &lt;div className="componentOne"&gt;

      &lt;ComponentTwo onSwipe={this.handleSwipe.bind(this)} /&gt;;

      &lt;ComponentThree swipePosition={this.state.swipePosition} /&gt;

    &lt;/div&gt;;
  }
}

class ComponentTwo extends React.Component {

  handlePanEnd() {
    this.props.onSwipe(percentage);
  }

  render() {
    return &lt;Hammer onPanEnd={this.handlePanEnd.bind(this)}&gt;
       &lt;li&gt;some content goes here...&lt;/li&gt;
    &lt;/Hammer&gt;;
  }
}

class ComponentThree extends React.Component {

  constructor(){
    super();
    this.state = {
      styles: {
        rejected: {},
        accepted: {},
      },
    };
  }

  getStyles(swipePosition) {

    // do bunch of stuff i.e. for rejected:
    const rejected = {
      WebkitTransform: 'translate3d(-100%, 0, 0)'
    }

    this.setState({
      styles: {
        rejected,
        accepted,
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    this.getStyles(this.props.swipePosition);
  }

  componentDidMount() {
    this.getStyles(this.props.swipePosition);
  }

  render() {

    return &lt;div className='ComponentThree'&gt;
      &lt;div style={this.state.styles.rejected}&gt;&lt;/div&gt;
      &lt;div style={this.state.styles.accepted}&gt;&lt;/div&gt;
    &lt;/div&gt;;
  }
}
</code></pre>

<p>Any suggestions welcome. </p>