Tengo una tabla en reactjs la cual está de la siguiente manera:
<table className="responsive-table">
<thead>
<tr className="titlesRow">
<th>
<p>{this.props.value == 1 && "Id company"}</p>
<p>{this.props.value == 2 && "Id contacto"}</p>
<p>{this.props.value == 3 && "Id Freelace"}</p>
<p>{this.props.value == 4 && "Id colaborador"}</p>
</th>
<th>
<p>{this.props.value == 1 && "Razon social"}</p>
<p>{this.props.value == 2 && "Nombre"}</p>
<p>{this.props.value == 3 && "Razon social"}</p>
<p>{this.props.value == 4 && "Nombre"}</p>
</th>
<th>
<p>{this.props.value == 1 && "Nombre comercial"}</p>
<p>{this.props.value == 2 && "Apellido"}</p>
<p>{this.props.value == 3 && "Nombre comercial"}</p>
<p>{this.props.value == 4 && "Apellido"}</p>
</th>
<th>
<p>{this.props.value == 1 && "Sitio Web"}</p>
<p>{this.props.value == 2 && "Email alterno"}</p>
<p>{this.props.value == 3 && "Sitio Web"}</p>
<p>{this.props.value == 4 && "Numero de colaborador"}</p>
</th>
<th>E-mail</th>
<th>Options</th>
</tr>
</thead>
<tbody>
{
this.state.table.map((item, index) => {
return(
<div key={index}>
{
this.state.value == 1 &&
<tr key={index}>
<td>{item.iddef_cliente}</td>
<td>{item.razon_social}</td>
<td>{item.nombre_comercial}</td>
<td>{item.sitio_web}</td>
<td>{item.email}</td>
<td><a className="btn-floating btn-small waves-effect waves-light"><i className="material-icons">edit</i></a></td>
</tr>
}
{
this.state.value == 2 &&
<tr>
<td>{item.iddef_cliente}</td>
<td>{item.nombre}</td>
<td>{item.apellido}</td>
<td>{item.email_alterno}</td>
<td>{item.email}</td>
<td><a className="btn-floating btn-small waves-effect waves-light"><i className="material-icons">edit</i></a></td>
</tr>
}
{
this.state.value == 3 &&
<tr>
<td>{item.iddef_cliente}</td>
<td>{item.razon_social}</td>
<td>{item.nombre_comercial}</td>
<td>{item.sitio_web}</td>
<td>{item.email}</td>
<td><a className="btn-floating btn-small waves-effect waves-light"><i className="material-icons">edit</i></a></td>
</tr>
}
{
this.state.value == 4 &&
<tr>
<td>{item.iddef_cliente}</td>
<td>{item.nombre}</td>
<td>{item.apellido}</td>
<td>{item.numero_colaborador}</td>
<td>{item.email}</td>
<td><a className="btn-floating btn-large waves-effect waves-light"><i className="material-icons">edit</i></a></td>
</tr>
}
</div>
);
})
}
</tbody>
Sé que la parte de <tbody>
no está ordenada de manera correcta ya que todo esta dentro del div
, deseo que al realizar la validación de que cuando el estado "table" cambie, me muestre diferentes campos.
¿Cómo puedo hacer esto?
Gracias.