CODEWITHSUNDEEP
reactjs
Bobby Tables
Bobby Tables

Reputation: 163

reactjs - moving list items back and forth between two components

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: https://jsfiddle.net/6k9ncbr6/

class App extends React.Component {
constructor(props) {
    super(props);

    this.state = {
            searchResults: [],
            moveResults: []
    }

    this.handleEvent = this.handleEvent.bind(this);
}

showResults = (response) => {
    this.setState({
        searchResults: response.results,
        moveResults: []
    })
}

search = (URL) => {
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: URL,
        success: function(response) {
            this.showResults(response);
        }.bind(this)
    });
}

handleEvent = (clickedTrack) => {
    const { searchResults, moveResults } = this.state;
    const isInSearchResults = searchResults.some(result => result.trackId === clickedTrack.trackId);

    this.setState({
        searchResults: isInSearchResults ? searchResults.filter(i => i.trackId  !== clickedTrack.trackId) : [...searchResults, clickedTrack],
        moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack)
    });
}

componentDidMount() {
    this.search('https://itunes.apple.com/search?term=broods');
}

render(){
    return (
        <div>
            <Results 
              searchResults={this.state.searchResults} 
              handleEvent={this.handleEvent}/>
            <Results 
              searchResults={this.state.moveResults} 
              handleEvent={this.handleEvent} />
        </div>
    );
  }
}
class Results extends React.Component {
  render(){
    const { handleEvent, searchResults } = this.props;
    return(
        <ul>
            {this.props.searchResults.map((result, idx) => 
                    <ResultItem 
                 key={`${result.trackId}-${idx}`} 
                 trackName={result.trackName} 
                 track={result}
                 handleClick={handleEvent} />
                    )}
        </ul>
    );
  }
}

  class ResultItem extends React.Component {
     render(){
        const { handleClick, track, trackName } = this.props
    return <li onClick={() => handleClick(track)}> {trackName} </li>;
   }
 }

ReactDOM.render(
   <App />, document.getElementById('root')
);

Upvotes: 0

Views: 1256

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62743

You left off a property name:

moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack.trackId)

The clickedTrack.trackId is missing the .trackId in your existing code.

Here's the working jsFiddle.

Upvotes: 2

Related Questions