CODEWITHSUNDEEP
javascriptarraysreactjs
anbhd
anbhd

Reputation: 125

Rendering multiple states one after the other using .map

I'm having some difficulty with rendering using .map. What I'm trying to do is to render the artist name, the song title, and a link to a page where you can find sheet music. I have a separate state for each one of these categories and it looks like this: 

this.state = {
        currentSearch: "",
        artistName: [],
        songTitle: [],
        tabId: [],
    }

Here is my render:

render(){
    return(
        <div>
            {this.props.artist.map((artist, i) =>{
                return(
                    <h3>{artist}</h3>
                )
            })}

            {this.props.title.map((title, i) => {
                return (
                    <h3>{title}</h3>
                )
            })}

            {this.props.link.map((link, i) => {
                return (
                    <h3>{link}</h3>
                )
            })}
        </div>
    )
}

The main problem that I'm having is that the information will display on the page like this: 

The Beatles
The Beatles
The Beatles
All You Need Is Love
Blackbird
Twist and Shout
www.allyouneedisloveurl.com
www.blackbirdurl.com
www.twistandshouturl.com

Is there a way I can map these so that they appear one after the other like this? 

The Beatles
All You Need Is Love
www.songurl.com

Thank you!!

Upvotes: 2

Views: 96

Answers (2)

Prakash Sharma
Prakash Sharma

Reputation: 16472

You can use the index to render the other data. Try

render(){
    return(
        <div>
            {this.props.artist.map((artist, i) =>{
                return(
                    <div key={i}>
                       <h3>{artist}</h3>
                       <h3>{this.props.title[i]}</h3>
                       <h3>{this.props.link[i]}</h3>
                    </div>
                )
            })}
        </div>
    )
}

Upvotes: 1

Tim Han
Tim Han

Reputation: 166

You can put them all together in one map like this:

render(){
  return(
    <div>
      {
       this.props.artist.map((artist, i) =>{
         return( 
           <div key={i} className="artist">
             <h3>{artist}</h3>
             <h3>{this.props.title[i]}</h3>
             <h3>{this.props.link[i]}</h3>
           </div>
         )
        })
      }
    </div>
  )
}

Upvotes: 0

Related Questions