You could also use conditional rendering in the SongsList and ArtistsList components to display a message when there are no elements to display.

Here's how we've done this for songs in the final version of the code:

<Container className='lf-songs'> 
    {songElements.length > 0? ( 
    <ListGroup> 
        {songElements} 
    </ListGroup> 
    ) : ( 
       <span>No songs</span> 
    )} 
</Container> 

This approach uses a ternary operator to either render the ListGroup element or span. There are many other ways to do conditional rendering with React; check out the following references for more details:

• Accordion component: https://react-bootstrap.github.io/components/accordion
• Tab component: https://react-bootstrap.github.io/components/tabs