Rerender parent component

Question

I'm trying to make a view of a simple list with the ability to add things on the go. And I've gotten as far so it "works" but the UI doesn't get rendered correctly.

This is my parent

var Main = React.createClass({
    getInitialState: function() {
      return {
        messageStorage: this.getMessages()
      }
    },
    getMessages: function() {
      return ['Banana', 'Orange'];
    },
    addMessage: function(val) {
      this.state.messageStorage.push(val);
      console.log(this.state.messageStorage);
      //this.render();
    },
    render: function() {
      return (
          <div>
            <InputField add={this.addMessage} />
            <MessageField value={this.state.messageStorage} />
          </div>
        )
    }
  });

And these are the childs

var InputField = React.createClass({
        getInitialState: function() {
          return {
              textValue: ''
          }
        },
        changeInputValue: function(e) {
          this.setState({textValue: e.currentTarget.value});
        },
        addMsg: function(e) {
          this.props.add(this.state.textValue);
          this.setState({textValue: ''});
          this.refs.msgInput.focus();
        },
        render: function() {
          return (
              <div>
                <input type='text' value={this.state.textValue} onChange={this.changeInputValue} ref='msgInput' />
                <input type='button' value='Save' onClick={this.addMsg} />
              </div>
            )
        }
      });

      var MessageField = React.createClass({
        eachMessage: function() {
          var msg = this.props.value.map(function(item, index) { 
            return <Message value={item} key={index} />
          }); 
          return msg;
        },
        render: function() {
          return (
              <div>
                {this.eachMessage()}
              </div>
            )
        }
      });

      var Message = React.createClass({
        render: function() {
          return (
             <div>
               {this.props.value}
             </div>
            )
        }

In the function "addMessage()" in the Main-component Im logging the contents of my array messageStorage and it seems to be correct. But it never gets rendered in the UI. Why is this?

Answer 1

Use setState() instead push into state. setState will trigger re-render.

Answer 2

Your state changes are not correct - You should always call this.setState to reflect the latest state values.

addMessage: function(val) {
  this.state.messageStorage.push(val);
  console.log(this.state.messageStorage);
  //this.render();
},

Change above to this -

addMessage: function(val) {
  var messageStore = this.state.messageStorage;
      messageStore.push(val);
  this.setState({messageStorage:messageStore});
  console.log(this.state.messageStorage);
  //this.render();
},