Javascript - вернуть два вывода через array.map ()

Question

У меня есть следующее возвращение в компоненте реагирования:

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

Это отображает имена категорий и затем проходит через массив имен, получая описание от компонента Playlist. Может кто-нибудь сказать мне, как я бы вернуть плейлисты под каждым именем? Я попробовал следующее, но это просто не будет работать:

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

Answer 1

Вы можете использовать реагировать на фрагменты , используя их полный синтаксис <React.Fragment> позволяет поместить в них ключевой атрибут:

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

Элемент <React.Fragment> не будет отображаться в DOM и позволяет помещать в них любые элементы.

Answer 2

Вам нужно обернуть свои элементы в функции карты в некоторый тег html или 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>
        );
}

И, пожалуйста, не забудьте использовать ключ в вашем циклов