React List Component does not rerender new list

Question

I am working on a Spotify clone and am currently on the search features. I already set up the method that sends a request to the Spotify API and then returns a list of the artist, track, and albums that pop up with that search result, so I want to render the lists as mini components and make the lists rerender when you change the search result and get a new callback with the different results.

<ArtistList items={this.state.artists} />

class ArtistList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        this.setState({
            list: this.props.items
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            list: nextProps.items
        });
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map(item => (
                        <MiniArtist data={item}/>))}
                </ul>
            </div>
            );
    }
}

This was the code that I made for the list where new items would be passed in as props from the search bar and then change the state, but this doesn't change what gets displayed from the MiniArtist components that I make after the first callback. Is there any way to fix this to dynamically change along with the search changing like in some current apps, or is it too much performance wise and I should instead create a separate page that renders the components from the search result once and needs to be reloaded each time.

Answer 1

Try using key={...} in the <MiniArtist /> Component. And make sure you assign something unique as key. (e.g. Id)

<MiniArtist key={item.id} data={item} />

What this does, is basically telling React which items in the list have been changed and which ones are the same.