Reputation: 3
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
Reputation: 7774
Use setState() instead push into state. setState will trigger re-render.
Upvotes: 0
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