title: Reactjs - Moving a list item to another list
body: <p>I'm slowly getting the knack (I think) for react. What I'm trying to do is display a list in one component and then make each list item (item 1, item 2, etc..) clickable so that when it is clicked, it can move back and forth between the two <code>&lt;ItemList /&gt;</code> components. What I have is below, I think where my problem is setting the state on the first list in the <code>handleEvent()</code>. </p>
  
  <pre><code>class SingleItem extends React.Component {
    render() {
      let data = this.props.data;
  
      return (
          &lt;li&gt;
              &lt;div&gt; {data.name} &lt;/div&gt;
          &lt;/li&gt;
      );
    }
  }
  
  class ItemList extends React.Component {
     render() {
       let itemArr = this.props.items;
  
       let listItems = itemArr.map((itemObj) =&gt; {
          return &lt;SingleItem key={itemObj.id} data={itemObj}/&gt;;
  });
  
      return (
          &lt;ul onClick={props.handleEvent}&gt;
              {listItems}
          &lt;/ul&gt;
      );
    }
  }
  
  class App extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
          boxOne: {listItems},
          boxTwo:''
      };
  
      this.handleEvent = this.handleEvent.bind(this);
  }
  
  handleEvent() {
      this.setState({
          boxOne: this.state.boxTwo,
          boxTwo: this.state.boxOne
      });
  }
  render() {
      return (
          &lt;div&gt;
              &lt;ItemList items={this.state.boxOne} /&gt;
              &lt;ItemList items={this.state.boxTwo} /&gt;
          &lt;/div&gt;
      );
    }
  };
  
  var items = [
    {name: "Item 1", id: 1},
    {name: "Item 2", id: 2},
    {name: "Item 3", id: 3},
    {name: "Item 4", id: 4},
  ]
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>