DaveLar
DaveLar

Reputation: 3

Rerender parent component

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?

Upvotes: 0

Views: 180

Answers (2)

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

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

Upvotes: 0

WitVault
WitVault

Reputation: 24140

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();
},

Upvotes: 1

Related Questions