Управление state в react.js

class Base extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      elements: [{ 
        id: 0, 
        name: "Name" 
      }] 
    }; 
    this.add = this.add.bind(this); 
    this.remove = this.remove.bind(this); 
  } 
  add() { 
    let newState = this.state.elements; 
    console.log(newState[newState.length - 1]); 
    newState.push({ 
      id: newState[newState.length - 1].id + 1, 
      name: "Add manual" 
    }); 
    this.setState({ 
      elements: newState 
    }) 
  } 
  remove(item) { 
    let newState = this.state.elements; 
    if (this.state.elements.indexOf(item)) { 
      newState.splice(this.state.elements.indexOf(item), 1); 
      this.setState({ 
        elements: newState 
      }); 
    } 
  } 
  render() { 
    const elements = this.state.elements.map( 
      (item, i) => < div key = { 
        i 
      } > < Select data = { 
        item.id + " - " + item.name 
      } 
      /><button onClick={this.remove.bind(this, item)}>Remove</button > < /div> 
    ) 
    return ( < div className = "Container" > 
      < 
      div className = "Row" > 
      < 
      div > Это содержимое Base <button 
      onClick = { 
        this.add 
      } > Add item < /button> < / 
      div > < div > { 
        elements 
      } < /div> </div > < 
      /div> 
    ) 
  } 
 
} 
 
class Select extends React.Component { 
  constructor(props) { 
    super(props); 
    this.data = props.data; 
  } 
 
  render() { 
    return ( <button> 
      Это оригинал: { 
        this.data 
      } </button> 
    ) 
  } 
} 
         
ReactDOM.render( 
  <Base />, 
  document.getElementById('root') 
);  
        

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<div id="root"></div>