map inside another map react-CodePudding

I try to map inside another map, but I either get the error that says the variable declared for the map is not a function or I get Cannot read properties of undefined (reading 'map'). I did like a lot of answers on the other posts on stackoverflow but it doesn't work. Thank you for help.

exemple data:

product: [
  {
   id:1,
   name: "product1",
   description: "description product",
   color:[
     {
       id_color:1,
       color:"blue",
       quantity:"200ml"
     },
     {
       id_color:2,
       color:"Yellow",
       quantity:"500ml"
     }
  }

code

{product.map((data) =>
   <tr key={data.id} >
         <td >{data.name}</td>
         <td >{data.description}</td>
                                    
         {data.color.map((datas)=>{
           <tr key={datas.id_color} >
              <td >{datas.color}</td>
              <td >{datas.quantity}</td>           
           </tr>
         })              
        }                       
   </tr>                              
)}

CodePudding user response：

you need to return if you are using {} in your map :

{product.map((data) =>
   <tr key={data.id} >
         <td >{data.name}</td>
         <td >{data.description}</td>
                                    
         {data.color.map((datas)=>{
           return(<tr key={datas.id_color} >
              <td >{datas.color}</td>
              <td >{datas.quantity}</td>           
           </tr>)
         })              
        }                       
   </tr>                              
)}

or you can remove {} from your code :

{product.map((data) =>
   <tr key={data.id} >
         <td >{data.name}</td>
         <td >{data.description}</td>
                                    
         {data.color.map((datas)=><tr key={datas.id_color} >
              <td >{datas.color}</td>
              <td >{datas.quantity}</td>           
           </tr>)              
        }                       
   </tr>                              
)}

CodePudding user response：

map function should return if it has multple lines
if you want to skip return then use parenthesis instead of {}

{product.map((data) => (
        <tr key={data.id}>
          <td>{data.name}</td>
          <td>{data.description}</td>
          {data.color.map((datas) => (
            <tr key={datas.id_color}>
              <td>{datas.color}</td>
              <td>{datas.quantity}</td>
            </tr>
          ))}
        </tr>
      ))}

Working example : https://stackblitz.com/edit/react-ts-i6zdht?file=App.tsx

CodePudding user response：

Thank you very much everyone @Omar Dié, @Codeur passionné, @Nima and @DerMolly for your help, I think the problem comes from this : I saw in the console that I get the second array in this form in brackets without index: I don't understand why this array is not getting an index

color:"[{
       id_color:1,
       color:"blue",
       quantity:"200ml"
     },
     {
       id_color:2,
       color:"Yellow",
       quantity:"500ml"
     }] "