Learn TypeScript 3 by Building Web Applications

Defining the props

Our SongsList component will be a dumb component. We now need to define and use its props.

We will pass two things to that component:

• A list of songs to render
• A callback function that should be invoked whenever an element in the list gets selected

Go back to the songs-list.tsx file.

Change the Props interface to the following:

type Props = { 
    songs: FindSongs_songs[]; 
    songSelected: (song: FindSongs_songs) => void; 
}; 

And add the import:

import { FindSongs_songs } from '../generated/FindSongs';

Now that we have clearly stated our requirements, we can code assuming that we will get the expected inputs. Let's use the songs array to build the JSX elements to render.

We will go back to the Home view a bit later to adapt ...