const Albums = ({artist, album, textBarInput}) => {  

    let indexOfTheArtist = takeTheIndexOfTheArtist(artist);   // -1 means not found    |    >= 0   means found and return his position
    let artistAlbums =  bands[indexOfTheArtist].albums
            
    for(let i = 0; i < artistAlbums.length; i+=1){
        return(
             <Record spotifyLink={artistAlbums[i].spotifyLink} imageLink={artistAlbums[i].imageLink} title={artistAlbums[i].title} releaseDate={artistAlbums[i].releaseDate}></Record>
                );
    }
}


const Record = ({spotifyLink, imageLink, title, releaseDate}) => {
    return(
            <a href={spotifyLink} rel='noreferrer' target='_blank'><img src={imageLink} alt={title}></img></a>,
            <p>{title}</p>,
            <p>Release Date: {releaseDate}</p>
        );
}

export default Albums

Hi there, I'm working on a personal project which is a music gallery using React. So I have two select options(one for artists and one for albums) and an input bar so that the user can type the artist that they want and get the albums of that band. I also have an array named bands in which each entrance is a dictionary with the artist name (artist) and also a dictionary with all of the albums of that band with data like release date, spotify link and an image source of the album cover. As you can see on my Albums component I receive as props the input from the user, but when I pass these values to the Record component the only thing that renders on the page is the release date paragraph. Am I missing something?