Nested Map is not working properly on react template

Question

I am trying to mapping through three objects in react to render multiple categories on react template , Code doesn't give any error but its not showing any content on react web page.

return (

    <div className="container pt-80">
        <center>Category Grouping</center>
        {categories.map((cate,key)=>{

            subCategories.map(subCate=>{

                if(subCate.category === cate.id){

                    pType.map(ptype=>{

                        if (ptype.category === subCate.id){

                            console.log("Category : ",cate.category)
                            console.log("Sub Category : ",subCate.subCatName)
                            console.log("Product Type : ",ptype.ptype)
                            
                            console.log("*******************************************")
                            
                            return(
                                <Fragment>
                                    <h1 style={{marginLeft:"30px"}}>{cate.category}</h1>
                                    <h1 style={{marginLeft:"60px"}}>{subCate.subCatName}</h1>
                                    <h1 style={{marginLeft:"120px"}}>{ptype.ptype}</h1>
                                </Fragment>
                            )
                        }
                    })
                }
            })
        })}
    </div>
    
)

Its printing the correct values in console :

Maybe you are missing a return before subCategories.map. Also Return null for else condition and wrap the return from subCategories.map in a div and finally don't miss the key prop — Akhil
– Akhil, Commented Aug 20, 2021 at 17:31

Hozeis · Accepted Answer · 2021-08-20 17:51:34Z

2

Extending what @Akhil said in the comment. You are actually not returning anything in you're first two map calls, only the last.

add return before both nested map calls:

return subCategories.map(subCate=>{...

and

return pType.map(ptype=>{

Also I would add a return null after your if statements. Map expects a return value.

if(subCate.category === cate.id){
 ....
}
return null;

and

if (ptype.category === subCate.id){
 ....
}
return null;

edited Aug 20, 2021 at 17:51

answered Aug 20, 2021 at 17:38

Hozeis

1,76218 silver badges39 bronze badges

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

Comments

Hriteek Bista · Accepted Answer · 2021-08-20 17:56:58Z

Look into the comment by @Akhil. You missed the return for the map.

const categories = [{ id: 1, category: "Foods & Supplements" }];
const subCategories = [{ id: 1, category: 1, subCatName: "Herbal Drinks" }];
const pType = [
  { id: 1, category: 1, ptype: "Herbal Juice" },
  { id: 2, category: 1, ptype: "Herbal Coffee Tea&Soup" }
];
export default function App() {
  return (
    <div>
      <h1>Category Grouping</h1>
      {categories.map((cate, key) => (
        <div key={key}>
          {subCategories.map((subCate, sKey) => (
            <div key={sKey}>
              {subCate.category === cate.id &&
                pType.map((ptype, pKey) => (
                  <div key={pKey}>
                    {ptype.category === subCate.id && (
                      <>
                        <h1 style={{ marginLeft: "30px" }}>{cate.category}</h1>
                        <h1 style={{ marginLeft: "60px" }}>
                          {subCate.subCatName}
                        </h1>
                        <h1 style={{ marginLeft: "120px" }}>{ptype.ptype}</h1>
                      </>
                    )}
                  </div>
                ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

Also, use some sort of linting (e.g. Eslint) and format the code, both will help to catch syntax errors.

Collectives™ on Stack Overflow

Nested Map is not working properly on react template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related