Tags not rendering in React

Question

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?

Answer 1

i'm pretty sure that the problem is data not being updated correctly. try adding a state that holds your current artist, and then for every record just pass the data from the state. something like this:

• add a state in your main component: const [currentArtist, setCurrentArtist] = useState({});
• use the setCurrentArtist after choosing the right artist,
• add record for each album like this:

 {currentArtist.albums.map((album) => <Record {...album} />)}

make sure the artist object in the state has keys with the props names. it should look like this:

 { spotifyLink: '.../.../', imageLink: '.../.../', title: 'Song Title'...}

by doing so, you can just spread the album item as a prop (example in code) and not needing to pass props one by one.