title: reactjs - moving list items back and forth between two components
body: <p>I have a small exercise I'm working on to learn ReactJS. I'm making an API call to display a list from iTunes, and when the individual list items are clicked on, they move over to a new list (kind of like a queue). When clicked on in the new list, they move back to the original list, however the list item is not being removed from the new list when it gets moved back. Here is a jsfiddle of my problem: <a href="https://jsfiddle.net/6k9ncbr6/" rel="nofollow noreferrer">https://jsfiddle.net/6k9ncbr6/</a></p>
  
  <pre><code>class App extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
              searchResults: [],
              moveResults: []
      }
  
      this.handleEvent = this.handleEvent.bind(this);
  }
  
  showResults = (response) =&gt; {
      this.setState({
          searchResults: response.results,
          moveResults: []
      })
  }
  
  search = (URL) =&gt; {
      $.ajax({
          type: 'GET',
          dataType: 'json',
          url: URL,
          success: function(response) {
              this.showResults(response);
          }.bind(this)
      });
  }
  
  handleEvent = (clickedTrack) =&gt; {
      const { searchResults, moveResults } = this.state;
      const isInSearchResults = searchResults.some(result =&gt; result.trackId === clickedTrack.trackId);
  
      this.setState({
          searchResults: isInSearchResults ? searchResults.filter(i =&gt; i.trackId  !== clickedTrack.trackId) : [...searchResults, clickedTrack],
          moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i =&gt; i.trackId !== clickedTrack)
      });
  }
  
  componentDidMount() {
      this.search('https://itunes.apple.com/search?term=broods');
  }
  
  render(){
      return (
          &lt;div&gt;
              &lt;Results 
                searchResults={this.state.searchResults} 
                handleEvent={this.handleEvent}/&gt;
              &lt;Results 
                searchResults={this.state.moveResults} 
                handleEvent={this.handleEvent} /&gt;
          &lt;/div&gt;
      );
    }
  }
  class Results extends React.Component {
    render(){
      const { handleEvent, searchResults } = this.props;
      return(
          &lt;ul&gt;
              {this.props.searchResults.map((result, idx) =&gt; 
                      &lt;ResultItem 
                   key={`${result.trackId}-${idx}`} 
                   trackName={result.trackName} 
                   track={result}
                   handleClick={handleEvent} /&gt;
                      )}
          &lt;/ul&gt;
      );
    }
  }
  
    class ResultItem extends React.Component {
       render(){
          const { handleClick, track, trackName } = this.props
      return &lt;li onClick={() =&gt; handleClick(track)}&gt; {trackName} &lt;/li&gt;;
     }
   }
  
  ReactDOM.render(
     &lt;App /&gt;, document.getElementById('root')
  );
  </code></pre>