CODEWITHSUNDEEP
reactjsreturncomponents
Shauna
Shauna

Reputation: 181

Javascript - Return two outputs through an array.map()

I have the following return in a react component:

render() {
     return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>
                        <p>{category.name}</p>
                    )}
                </div>
                <div className = "category-name">
                    {categories.map(category =>
                        <Playlist categoryid={category.id}/>
                    )}
                </div>
            </div>
        );
}

This is displaying names of categories and then going through the array of names getting the description from the Playlist component. Could someone tell me how I would return the playlists under each name? I tried the following but it just won't work:

render() {
  return(
            <div>
                <div className = "category-name">
                    {categories.map(category =>{
                        return (<p>{category.name}</p>,
                            <Playlist categoryid={category.id}/>)
                        }     
                    )}
                </div>
            </div>
        );
}

Upvotes: 1

Views: 107

Answers (2)

Treycos
Treycos

Reputation: 7492

You could used react fragments, using their full syntax <React.Fragment> allows you to put a key attribute within them :

<div className = "category-name">
    {categories.map(category => {
        return 
            <React.Fragment key={category.id}>
                <p>{category.name}</p>,
                <Playlist categoryid={category.id}/>
            </React.Fragment>
        }   
    )}
</div>

The <React.Fragment> element will not be rendered in the DOM and allows you to put any elements within them.

Upvotes: 6

Vlad Serdyuk
Vlad Serdyuk

Reputation: 200

You need to wrap your elements in map function in some html tag or React.Fragment:

render() {
  return(
            <div>
                <div className = "category-name">
                    {categories.map(category => (
                          <div key={category.id}>
                            <p>{category.name}</p>
                            <Playlist categoryid={category.id}/>
                         </div>
                        )
                    )}
                </div>
            </div>
        );
}

And please, don't forget to use key in your cycles

Upvotes: 2

Related Questions