Map inside a Map function is not returning jsx

Question

i have objects like this

let data = [
    { id: 1, name: "Manikanta", age: 20, Gender: "male"},
    { id: 2, name: "Varsha", age: 85, Gender: "female"},
    { id: 3, name: "Sai", age: 18, Gender: "male"},
    { id: 4, name: "John", age: 24, Gender: "female"},
  ];

let settings = [
 
  {id :1 ,class :"col1",expandable:true},
  {id :2,class :"col2",expandable:true},
  {id :3,class :"col3",expandable:true},
  {id :4,class :"col4",expandable:true}
]

let expandabaledata =[
  {id:1 , content : "I am content 1" },
  {id:2 , content : "I am content 2"},
  {id:3 , content : "I am content 3" },
  {id:4 , content : "I am content 4" }
]

where it is sent as props to another component and the receiving component will take those props and does some action on that objects to retrieve data and display as a table with collapse feature. I am attaching a part of the code where i will do a map inside map and return a table row and i performed some checks with console logs where i could get the desired data after the if condition

 {props.data.map((data) => {
          props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}
        }

I dont have any error but the table rows are not returning by those 2 map functions

You don't return anything from the first `map` function. `return props.settings.map` — Asaf Aviv, Aug 12 '20 at 07:22
Why do you have 3 different nested `maps`. Seems unnecessary — adiga, Aug 12 '20 at 07:23

score 0 · Accepted Answer · answered Aug 12 '20 at 07:26

You don't return anything from the first map function. Either add a return statement

{props.data.map((data) => {
         return props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}
        }

or you can remove the squigly brace. For one statement function bodies not having any brace or () around it then that statement result is automatically returned

{props.data.map((data) =>
          props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}

Map inside a Map function is not returning jsx

1 Answers1