Learn TypeScript 3 by Building Web Applications

Creating an ArtistsList component

Another improvement could be to implement an ArtistsList component and to then render both lists side by side in the Home page like we did with the Vue version of the application. To do so, you could, for example, wrap the two lists of the Home page inside of an accordion or in a tabbed panel.

Here's an example taken from the final version of the code, which you can find under Chapter12/lyricsfinder-v2 in the code samples of this book:

<Accordion> 
    <Card> 
        <Accordion.Toggle as={Card.Header} variant="link" eventKey="0"> <h3>Artists</h3> </Accordion.Toggle> <Accordion.Collapse eventKey="0"> <Card.Body> <ul> {foundArtistsList} </ul> </Card.Body> </Accordion.Collapse> <Accordion.Toggle as={Card.Header} variant="link" ...