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

Question

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>
        );
}

So you only want to combine both map functions? I guess the second code example throws an error? — Gh05d
– Gh05d, Commented Apr 23, 2020 at 8:29
Are you getting any error in the second case? I think you may have to wrap the <p> tag and <Playlist> component within a single wrapper (<div>) if you are getting any error. — Batman
– Batman, Commented Apr 23, 2020 at 8:30
I wasn't getting any error even in the console. The name just wasn't displaying and it was going straight to the component. — Shauna
– Shauna, Commented Apr 23, 2020 at 8:33

Treycos · Accepted Answer · 2020-04-23 10:22:42Z

6

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.

edited Apr 23, 2020 at 10:22

answered Apr 23, 2020 at 8:29

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

5 Comments

Batman Over a year ago

<> </> That's the new thing I have learned from your code. Glad to learn that :)

Gh05d Over a year ago

<> is shorthand for <React.Fragment>, just in case you are wondering. reactjs.org/docs/fragments.html

gautamits Over a year ago

Just adding, <></> is good for wrapping components though there is slight difference. React.Fragment also accepts key prop while <></>, Does not. React shows warning when you are rendering components inside loop without key prop.

Treycos Over a year ago

Since my answer was lacking a lot of information and was not optimal yet somehow got attention, I updated it with the fragment syntax that allows keys.

tonysepia Over a year ago

After mocking about with the default "comma" syntax for an hour this saved my day! This works with returning several material-ui TableCell instances

Vlad Serdyuk · Accepted Answer · 2020-04-23 08:32:40Z

2

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

answered Apr 23, 2020 at 8:32

Vlad Serdyuk

1903 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related