Difficulty grabbing values of list items in mapped API data using React

Question

I'm having some difficulty with grabbing specific data from list items that are coming from an API that is being mapped using React.

Here in my render I'm mapping over a list of artists and based on that it'll render the artists name, song title and the URL of the sheet music:

render(){
    return(
        <div className="songContainerOuter">
            {this.props.artist.map((artist, i) => {
                return (
                    <div className="songContainerInner" key={i}>
                        <ul>
                            <div className="leftSide">
                                <li ref={ref => this.artistName = ref}>{artist}</li>
                            </div>
                            <div className="rightSide">
                                <div className="topRight">
                                    <li ref={ref => this.songTitle = ref}>{this.props.title[i]}</li>
                                </div>
                                <div className="bottomRight">
                                    <li ref={ref => this.songUrl = ref}><a href={`${this.props.link[i]}`}><i className="fas fa-link"></i></a></li>
                                    <li onClick={this.addFavourite}><i className="fas fa-plus"></i></li>
                                </div>
                            </div>
                        </ul>
                    </div>
                )
            })}
        </div>
    )
}

Then on click of an li which is a plus icon, I want to store the values in each individually rendered div. The problem I'm having is that when I click on the add button, in my console log I'm getting all of the data back and the exact same song, artist and URL regardless of which mapped div add button I'm clicking on:

addFavourite(e){
    e.preventDefault();
    const favs ={
        artist: this.artistName.textContent,
        title: this.songTitle.textContent,
        url: this.songUrl.textContent.outerHTML,
    };
    const newFavs = Array.from(this.state.favourites);
    newFavs.push(favs);
    this.setState({
        favourites: newFavs
    })
    console.log(this.state.favourites)
}

Is there an alternative way to store the values within the li tags and store ONLY the values uniquely within each mapped div?

Please post a minimal reproducible example

Code-Apprentice
– Code-Apprentice

2018-02-16 05:11:09 +00:00
Commented Feb 16, 2018 at 5:11 — Code-Apprentice
– Code-Apprentice, Commented Feb 16, 2018 at 5:11

Gorrut · Accepted Answer · 2018-02-16 07:51:48Z

1

Please try the following. If you want to check if your state is updated properly, please refer to @Ved answer.

addFavourite(artist, songIndex){
    const fav = {
        artist,
        title: this.props.title[songIndex],
        url: this.props.link[songIndex]
    };

    const newFavs = Array.from(this.state.favourites);
    newFavs.push(favs);

    this.setState({
        favourites: newFavs
    });
}

render(){
    return (
        <div className="songContainerOuter">
            {this.props.artist.map((artist, i) => {

                const { link, title } = this.props;

                return (
                    <div className="songContainerInner" key={i}>
                        <ul>
                            <div className="leftSide">
                                <li>{artist}</li>
                            </div>
                            <div className="rightSide">
                                <div className="topRight">
                                    <li>{title[i]}</li>
                                </div>
                                <div className="bottomRight">
                                    <li><a href={`${link[i]}`}><i className="fas fa-link"></i></a></li>
                                    <li onClick={event => this.addFavourite(artist, i)}><i className="fas fa-plus"></i></li>
                                </div>
                            </div>
                        </ul>
                    </div>
                )
            })}
        </div>
    )
}

answered Feb 16, 2018 at 7:51

Gorrut

2785 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anbhd Over a year ago

Thank you for this! It works! I had a different solution in place over night where on click i just did document.getElementById, but I'm not sure if that's just not as elegant as your solution is. I'll take a look at this more in depth to understand it.

Ved · Accepted Answer · 2018-02-16 05:26:10Z

0

The problem is you are trying to get data just after setState. setState is async operation hence you are getting old data. try putting logs inside setState callback.

    addFavourite(e){
        e.preventDefault();
        const favs ={
            artist: this.artistName.textContent,
            title: this.songTitle.textContent,
            url: this.songUrl.textContent.outerHTML,
        };
        const newFavs = Array.from(this.state.favourites);
        newFavs.push(favs);
        this.setState({
            favourites: newFavs
        },()=>{
       console.log(this.state.favourites)//inside setState callback
})
       }

answered Feb 16, 2018 at 5:26

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Comments

salman.zare · Accepted Answer · 2018-02-16 05:27:28Z

0

@anbhd, can you please make the following changes and test it: Add the following section to the constructor section:

 constructor(props) {
    super(props);
    this.addFavourite = this.addFavourite.bind(this);
}
  addFavourite(artist) {
    console.log(artist)
  }

And change the onClick function like the following:

<li onClick={this.addFavourite(artist)}><i className="fas fa-plus"></i></li>

edited Feb 16, 2018 at 5:27

answered Feb 16, 2018 at 5:08

salman.zare

6495 silver badges8 bronze badges

2 Comments

anbhd Over a year ago

Apologies, I have the constructor set up that way. If I change the li onClick to what you proposed, I don't get any data back so that doesn't work.

salman.zare Over a year ago

Can you please change it to onClick={this.addFavourite(artist)} and change your function to ``` addFavourite(artist) {console.log(artist)}```

Collectives™ on Stack Overflow

Difficulty grabbing values of list items in mapped API data using React

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related