0

Tengo una tabla en 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.

1 respuesta 1

0

Ya quedo solucionado. solo cambie la parte del <tbody> de la siguiente manera

<tbody>
                    {
                        this.state.table.map((item, index) => {
                            return(
                                <tr key={index}>
                                {
                                     this.props.value == 1 ?
                                        <React.Fragment>
                                            <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>        
                                        </React.Fragment>
                                        : null
                                }
                                {
                                    this.props.value == 2 ?
                                    <React.Fragment>
                                        <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>
                                        </React.Fragment>
                                        : null
                                }
                                {
                                    this.props.value == 3 ?
                                    <React.Fragment>
                                        <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>
                                        </React.Fragment>
                                        : null
                                }
                                {
                                    this.props.value == 4 ?
                                    <React.Fragment>
                                        <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>
                                        </React.Fragment>
                                        : null
                                }
                                    </tr>
                                );
                            }
                        )
                    }
                 </tbody>

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.