How to extract data from nested objects array in React?-CodePudding

I have kind of a special problem. I am currently learning react and have fetched data from my own demo API (a Java Spring project).

However, I receive the data correctly in React. Now I am creating Components with it (Music Track Metadata). The response of the API returns an Array of Objects and one item within the object is a nested object. Now i don't know how i can extract this information to my React component.

Here is an example JSON of my response:

Object {

duration: 200015

explicit: false

id: 8

isrc: "AUDCB1701705"

name: "Fireworks (feat. Moss Kena & The Knocks)"

songInfo: Object { id: 7, fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks & Moss Kena)", geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics", … }

fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks & Moss Kena)"

geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics"

id: 7

trackMetadata: null

As you can see, songInfo is the nested object. My react component is like:

class ResultArea extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tracks: []
        }
    }

    componentDidMount() {
        axios.get("http://localhost:8080/all")
            .then(response => {
                this.setState({
                    tracks: response.data
                })
            })
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("Component updated! State is now:");
        console.log(this.state.tracks);
    }

    render() {
        const tracklist = this.state.tracks;
        const tracks = tracklist.map(
            ({isrc, duration, explicit, fullTitle, geniusUrl}) =>
                <Track key={isrc} fullTitle={fullTitle} isrc={isrc} duration={duration} explicit={explicit} geniusUrl={geniusUrl} />
        );
        return (
            <React.Fragment>
                <div className="border">
                    <ul>
                        {tracks}
                    </ul>
                </div>
            </React.Fragment>
        )
    }
}

The "state" of my component holds the result of the API request. How does this work? I've read some posts about nested objects, but my approach is to render a "<Track ... /> item for each track, so the suggested methods of the posts do not work for me.... I need the "geniusUrl" and the "fullTitle" value from the nested songInfo-Object...

Many thanks!

EDIT: Removed a comment.

CodePudding user response：

So, your response.data is an array of 'tracks'. Each 'track' is an Object. You are currently destructuring your 'track' like so, in your .map() method:

{isrc, duration, explicit, fullTitle, geniusUrl}

But.... fullTitle and geniusUrl are not direct keys of your 'track' object, but rather it's songInfo key, so you'd have to adjust your destructuring:

{isrc, duration, explicit, songInfo: {fullTitle, geniusUrl}}