title: Update Array in React
body: <p>I am coming from Angular 1.x and looking to update an unordered list with React / Redux.</p>
  
  <p>In console.log, I am seeing the array being updated, but it doesn't seem to bind to the DOM. I have the following -- </p>
  
  <blockquote>
    <p>onKeyPress of an input, I have a function that pushes to messages array.</p>
  </blockquote>
  
  <pre><code>&lt;ul className="list-inline"&gt;
    {messages.map(function(message, key){
      return (
        &lt;li key={key} message={message}&gt;{message}&lt;/li&gt;
      );
    })}
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  I have the following (but no luck yet) Some notes. I am using Firebase to listen for events, and add to an array. Wondering if its a bind issue? -- </p>
  
  <pre><code>class Comments extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {messages: this.props.messages};
    }
  
    componentDidMount() {
      const path = '/comments/all';
      // Firebase watches for new comments
      firebase
        .database()
        .ref(path)
        .on('child_added', (dataSnapshot) =&gt; {
            this.state.messages.push(dataSnapshot.val());
            this.setState({
              messages: this.state.messages
            });
            //console.log(dataSnapshot.val());
        });
    }
  
    render() {
      const messages = this.state.messages;
      return (
        &lt;ul className="list-inline"&gt;
          {messages.map(function(message, key){
            &lt;li key={key}&gt;{message}&lt;/li&gt;
          })}
        &lt;/ul&gt;
      );
    }
  }
  </code></pre>