title: React - How do i force child components to re render when parent state component changes?
body: <p>in my pen <a href="http://codepen.io/seunlanlege/pen/PbYNor?editors=0010#0" rel="nofollow noreferrer">http://codepen.io/seunlanlege/pen/PbYNor?editors=0010#0</a></p>
  
  <p>what's happening is pretty simple. when the <code>this.send()</code> method is called. <code>this.state.chat</code> is sent to child component <code>&lt;Messages /&gt; which is then concatenated to the</code>this.state.messages` array and rendered.</p>
  
  <p>but the thing is, 1second after rendering i update <code>this.state.sent</code> which is a prop of <code>&lt;Messages /&gt;</code> but messages component doesn't re-render.</p>
  
  <p>please how do i force it to re-render?</p>
  
  <pre><code>class Messages extends React.Component{
  constructor(props){
  super(props);
  }
  render(){
  return(
  `&lt;p id={this.props.key} className={this.props.style}&gt;{this.props.msg}&lt;span&gt;{this.props.sent}&lt;/span&gt;&lt;/p&gt;`);
  }
  }
  
  
  class Chat extends React.Component {
  constructor(props) {
  super(props);
  this.count = 0;
      this.state = {chat :'',messages:[],sent:[]}; 
  }
  chatChange(event){
      this.setState({chat : event.target.value});
  }
  send(e){
      e.preventDefault();
      let x = this.state.messages;
      this.setState({messages:x.concat([&lt;Messages style="me" msg={this.state.chat} key={this.state.chat} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} /&gt;])});
  this.setState({chat:''});
  setTimeout(()=&gt;{
    this.setState({sent:this.state.sent.concat(['sent'])});
    this.count++;
  },1000);
  }
  render () {
      return(
          `&lt;div&gt;
          &lt;div id="top"&gt;&lt;h1&gt;Chat With Customer Support&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="chatbox"&gt;
          {this.state.messages}
          &lt;/div&gt;
          &lt;div id="bottom"&gt;
          &lt;form onSubmit={this.send.bind(this)}&gt;
          &lt;span&gt;
          &lt;input value={this.state.chat} type="text" onChange={this.chatChange.bind(this)} id="chat" value={this.state.chat} /&gt;
          &lt;button type="submit" id="send"&gt;Send&lt;/button&gt;
          &lt;/span&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;/div&gt;`
          );
  }
  }ReactDOM.render(&lt;Chat name="seun" /&gt;,document.getElementById('app')):&lt;/code&gt;
  </code></pre>