Saif Ali Khan Saif Ali Khan - 1 year ago 68
React JSX Question

Return multiple <td> from map without wrapping them within an enclosed tag

I am sort of stuck in this case.
I know to solve this kind of errors we have to wrap them inside a container or something. But in this case I can't. Please let me know if there is any solution for this.

<div className="table-responsive col-lg-12">
<table className="table table-bordered table-hover">
<thead>
<tr className="active">
<th className="width10">Name</th>
<th className="width10">Number</th>
<th className="width12">Email</th>
<th className="width10">User Handle</th>
<th className="width12">Address</th>
<th className="width10">Device IMEI</th>
<th className="width10">Mapped Date</th>
</tr>
</thead>
{ this.state.userDetails.map((user,i)=>{
return(
<tbody key={i}>
<tr>
<td>{user.fn ? user.fn : "-"}</td>
<td>{user.mob ? user.mob : "-"}</td>
<td>{user.eml ? user.eml : "NA"}</td>
<td>{user.uh ? user.uh : "-"}</td>
<td>{user.add ? user.add : "-"}</td>
{this.state.deviceDetails.map((dev,i)=>{
if(user.idx == dev.uid){
return(
<td>{dev.imei ? dev.imei : "-"}</td>
<td>{dev.dm ? dev.dm : "-"}</td>
)
}
})}
</tr>
</tbody>
)
})
}
</table>
</div>


Above is my table which I want to render.
There are two arrays from which I have to show my table content.
So I have to perform mapping twice for both the different arrays.
When I map
this.state.userDetails
I got the error. If I wrap it inside a
<div>
or
<tr>
both the content will be placed in Device IMEI
<th>
. How can I solve this? Any help much appreciated.. :)

Answer Source

Wrapping your content with a JSX sugar should work. You don't need to flatten the resulting array, React will do that for you. See the JSX Docs:

  {this.state.deviceDetails.map((dev,i)=>{
          if(user.idx == dev.uid){
            return([
              <td>{dev.imei ? dev.imei : "-"}</td>,
              <td>{dev.dm ? dev.dm : "-"}</td>
            ])
          }
        })}

See this issue that is raised on React Github page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download