menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Problem with multiple return statements

August 19, 2021 at 7:52am

Problem with multiple return statements

August 19, 2021 at 7:52am
I want to return a <h2> before keys.map gets returned. I already tried to add it with return (<h2>{item.title}....but this leaves everything below unreachable. Also tried different variations of {} and () but it didn't worked. Also thought of excluding the keys.map and make it a component.
  1. Is it possible to return the h2 inside menus.map and then return the keys.map?
  2. Is it a good idea to exclude the keys.map and make it a component?
return (
<section className="menu">
<div className="menu__container">
<h1>Menu</h1>
{menus.map((item) => {
<-- add <h2> here -->
const keys = Object.keys(item)
return(keys.map((gericht) => {
return (
<article className="menu__container__article" key={item[gericht].id}>
<div className="menu__container__article row">
<h3>{item[gericht].title}</h3>
<span>{item[gericht].price}</span>
</div>
<p className="menu__container__article__info">{item[gericht].desc}</p>
</article>
)
})
)})}
</div>
</section>
)

August 19, 2021 at 8:49am
return (
<section className="menu">
<div className="menu__container">
<h1>Menu</h1>
{menus.map((item) => {
const keys = Object.keys(item);
return (
<Fragment key={item.something}>
<h2>Item name</h2>
{keys.map((gericht) => (
<article
className="menu__container__article"
key={item[gericht].id}>
<div className="menu__container__article row">
<h3>{item[gericht].title}</h3>
<span>{item[gericht].price}</span>
</div>
<p className="menu__container__article__info">
{item[gericht].desc}
</p>
</article>
))}
</Fragment>
);
})}
</div>
</section>
);
like-fill
1
you are my hero thanks a lot :D
oh thanks! And You are my hero too. Now, lemme give you a codeplanation (I didn't gave you early because I was late for the gym): what I did was return a fragment with key so we can render multiples components (in your case, the callback map and the heading 2) without adding extra DOM nodes!
Edited
Thanks that is very helpful, I am still learning :D