1

Hola a todos soy nueva en esto y estoy aprendiendo React js, en este caso quiero que mi botón cambiar Status este deshabilitado cuando el trabajador este Activo, he intentado hacerlo pero no lo he podido lograr, espero y me puedan explicar

import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';

function Datos() {

  const [btnActivo, SetBtnActivo]= useState (false);

  const [usuarios, setUsuarios]= useState([
      {id: 1, nombre: "Arturo Borja", puesto:"programador Backend", status: "Activo"},
      {id: 2, nombre: "Armando Rojas", puesto:"Contador", status: "Vacaciones"},
      {id: 3, nombre: "Epifania Salinas", puesto:"Abogado", status: "Activo"},
      {id: 4, nombre: "Sebastian Cruz", puesto:"Dentista", status: "Pendiente"},
      {id: 5, nombre: "Luis Peralta", puesto:"Oftamologo", status: "Vacaciones"},
      {id: 6, nombre: "Sergio Torres", puesto:"Contador", status: "Activo"},
      {id: 7, nombre: "Amalia Días", puesto:"Dentista", status: "Pendiente"},
      {id: 8, nombre: "María Flores", puesto:"programador Frontend", status: "Activo"},
      {id: 9, nombre: "Anna Torres", puesto:"Programador Fullstack", status: "Vacaciones"},
      {id: 10, nombre: "Lizbeth Corrales", puesto:"Abogado", status: "Pendiente"},
  ])

  return (
      <div className="container">
      <div className="row">
          <div className="col-12">
          <div className="App">
              <br/>
              <h4>Lista de Empleados</h4><br/><br/><br/>
              <table className="table">
              <thead class="thead-dark">
                  <tr>
                  <th>ID</th>
                  <th>Nombre</th>
                  <th>PUESTO</th>
                  <th>STATUS</th>
                  <th></th>
                  <th></th>
                  </tr>
              </thead>
              <tbody>
                  {usuarios.map(usuarios=>(
                  <tr>
                      <td>{usuarios.id}</td>
                      <td>{usuarios.nombre}</td>
                      <td>{usuarios.puesto}</td>
                      <td>{usuarios.status}</td>
                      <td><a href='/Detalles'><button type="button" class="btn btn-outline-primary">Información</button></a></td>
                      <td><button type="button" class="btn btn-success">Cambiar Status</button></td>
                  </tr>
                  ))}
              </tbody>
              </table> 
          </div>
          </div>
      </div>
      </div>
      
  );
}
export default Datos;

Resultado

0

1 respuesta 1

2

Lo que deberías hacer es comprobar si el estado es "activo" y en ese caso añadirle el atributo "disabled", con el condicional.

Una manera sencilla seria la siguiente:

<td><button type="button" disabled = {usuarios.status === "Activo"}  class="btn btn-success">Cambiar Status</button></td>
1
  • Muchas gracias ya he implementado el cambio
    – Anna
    Commented el 6 may. 2021 a las 19:57

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.