changing the value onclick in react-js - react-native

Question

output look like this when i click change text button it should replace the text (TodoApplication) with that value if it is empty value(should replace empty heading) the value was not changing in this code! can anyone edit the code to get a solution!
var TodoApp = React.createClass({
getInitialState: function() {
return {items: []};
},
updateItems: function(newItem) {
var allItems = this.state.items.concat([newItem]);
this.setState({items: allItems});
},
render: function() {
return (
<div>
<TodoBanner/>
<TodoList items={this.state.items}/>
<TodoForm onFormSubmit={this.updateItems}/>
</div>
);
}
});
var TodoBanner = React.createClass({
render: function() {
return (
<div className="container">
<h3>TODO Application</h3>
</div>
);
}
});
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return (
<TodoListItem>{itemText}
</TodoListItem>
);
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoListItem = React.createClass({
render: function() {
return (
<li>{this.props.children}</li>
);
}
});
var TodoForm = React.createClass({
getInitialState: function() {
return {item: ''};
},
handleSubmit: function(e) {
e.preventDefault();
this.props.onFormSubmit(this.state.item);
this.setState({item: ''});
React.findDOMNode(this.refs.item).focus();
return;
},
onChange: function(e) {
this.setState({item: e.target.value});
},
render: function() {
return (
<div className="container">
<form onSubmit={this.handleSubmit}>
<input type='text' ref='item' onChange={this.onChange} value={this.state.item}/>
<input type='submit' value='Add' className="btn btn-success"/><br/>
<input type='text' ref='item' onChange={this.onChange} value={this.state.item}/>
<input type='submit' value='Change Text' className="btn btn-success"/>
</form>
</div>
);
}
});
ReactDOM.render(
<TodoApp/>, document.getElementById('todo'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="todo" />

Answer 1

I'm afraid I didn't get what you mean. Did you mean something like this?
https://jsfiddle.net/alfrcr/upzqf067/1/
If so, in order to change the 'Todo Application' text, you should send the form state to the upper component.
So TodoBanner can access 'that form state' as a props. (See the example code)