Create dynamic lists in React

class App extends React.Component{ state = { lists : { 'list-1' : 'PHP', 'list-2' : 'Wordpress' } } addList = (list) => { var timestamp = (new Date()).getTime(); this.state.lists['list-' + timestamp ] = list; this.setState({ lists : this.state.lists }); } removeList = (listKey) => { delete this.state.lists[listKey]; this.setState({ lists : this.state.lists }); } render() { return ( <div className="component-wrapper"> <ItemList lists={this.state.lists} removeList={this.removeList}/>  <AddListForm addList={this.addList} />  </div>  ); } } class ItemList extends React.Component{ render () { return ( <div className="container"> <ul className="list-group text-center"> { Object.keys(this.props.lists).map(function(key) { return <li className="list-group-item list-group-item-info">{this.props.lists[key]} <span onClick={()=>this.props.removeList(key)}>X</span></li> }.bind(this)) } </ul>  </div>  ); } } class AddListForm extends React.Component{ createList = (e) => { e.preventDefault(); var list = this.refs.listName.value; if(list.length > 0) { this.props.addList(list); } this.refs.listForm.reset(); } render = () => { return( <form className="form-inline" ref="listForm" onSubmit={this.createList}> <div className="form-group"> <label for="listItem"> List Name <input type="text" id="listItem" className="form-control" placeholder="e.x.lemmon" ref="listName" /> </label>  </div>  <button type="submit" className="btn btn-primary">Add List</button>  </form>  ) } } React.render( <App />, document.getElementById('app') );