Trying to map response in table but not getting expected output - Reactjs

devReact
March 9, 2023
252 views
1 vote
2 Answers

function App() {
  let response = [
    {
      id: 134,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 46, user_name: 'Sid', phone_number: 9834763467 },
        { id: 50, user_name: 'Tom', phone_number: 9834763467 },
      ],
    },
    {
      id: 948,
      user_name: 'def',
      phone_number: 9823437483,
      children: [
        { id: 20, user_name: 'Lina', phone_number: 9834763467 },
      ],
    },
    {
      id: 865,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 60, user_name: 'Nikk', phone_number: 9834763467 },
        { id: 15, user_name: 'Mina', phone_number: 9834763467 },
      ],
    },
  ];

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>name</th>
            <th>child name</th>
            <th>child id</th>
          </tr>
        </thead>
        <tbody>
          {response.map((value, index) => {
            return (
              <>
                <tr key={value.id}>
                  <td rowSpan={value['children'].length}>{value["id"]} 
                 </td>
                  <td rowSpan={value['children'].length}> 
                 {value["user_name"]}</td>
                  <td>{value["children"].map((child) => {
                    return (
                      <td>{child.user_name}</td>
                    );
                  })}</td>
                  <td>{value["children"].map((child) => {
                    return (
                      <td>{child.id}</td>
                    );
                  })}</td>
                </tr>
              </>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default App;

As I am trying to add rowspan attribute in table cell it only showing two rows only and third name showing in other column as well getting problem in mapping children name. the expected output will be 2 rowspan for first id of object and 1 rowspan for second id of object and 2 rowspan for second id of object and same for user_name. Expected table attached below

Answers

I couldn’t comment so I am adding an answer here with a potential solution.

So I found that you have a typo of sorts, you didn’t write your second map function correctly, this is how it should be:

<td>
   {value['children'].map((data, index) => {
     return <td key={index}>{data['user_name']}</td>;
   })}
</td>

I hope this helps, in case it’s not helpful, please provide a screenshot or something of what you’re seeing and maybe explain with a sketch what you want to do as well, I’ll do my best to help you out!

Edit:
According to your sketch I think this should work, the trick is to lay out the first element of the children array first with the other data, and then use slice to remove the first element and loop through the rest to add them to the table.

 <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Phone number</th>
        <th>Child id</th>
        <th>Child name</th>
        <th>Child phone number</th>
      </tr>
    </thead>
    <tbody>
      {response.map((value, index) => {
        return (
          <React.Fragment key={value.id}>
            <tr>
              <td rowSpan={value['children'].length}>{value['id']}</td>
              <td rowSpan={value['children'].length}>
                {value['user_name']}
              </td>
              <td rowSpan={value['children'].length}>
                {value['phone_number']}
              </td>
              <td>{value['children'][0]['id']}</td>
              <td>{value['children'][0]['user_name']}</td>
              <td>{value['children'][0]['phone_number']}</td>
            </tr>
            <tr>
              {value['children'].slice(1).map((data, index) => {
                return <React.Fragment key={index}> 
                  <td>{data['id']}</td>
                  <td>{data['user_name']}</td>
                  <td>{data['phone_number']}</td>
                </React.Fragment>;
              })}
            </tr>
            /*
            <tr>
              You can add a row here at the end if you want to add what
              you mentioned.
            </tr>
            */
          </React.Fragment>
        );
      })}
    </tbody>
  </table>

You should also make sure that the data you received does have children, for example by checking the length before starting to display your data, just as a safety measure.

This is how it looks:

This is a link to playcode to check the code live.

If you take a look in your console you’ll probably find something like

Warning: validateDOMNesting(...): <td> cannot appear as a child of <td>.

Since a td element can not appear as a child of a td element you could try the following.

{
  response.map((value, index) => {
    return (
      <tr key={value.id}>
        <td>{value["id"]}</td>
        <td>{value["user_name"]}</td>
        <td>{value["children"].map((child) => child.user_name).join(",")}</td>
      </tr>
    );
  });
}

This will result in a column with all the names of the children listed separated by comma’s.

Or you could create dedicated rows for your children below the parent like so:

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    {response.map((value, index) => {
      return (
        <>
          <tr key={value.id}>
            <td>{value["id"]}</td>
            <td>{value["user_name"]}</td>
          </tr>
          {value["children"].map((child) => {
            return (
              <tr style={{ background: "yellow" }}>
                <td>{child.id}</td>
                <td>{child.user_name}</td>
              </tr>
            );
          })}
        </>
      );
    })}
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Trying to map response in table but not getting expected output – Reactjs

Answers