0

En el useState tengo cargado un array de objetos con esta estructura:

[
  {
    "id_operation": 4,
    "user_email": "[email protected]",
    "concept": "Cobro de clase de ingles",
    "amount": "1500",
    "date": "2021-04-29T03:00:00.000Z",
    "type": "egreso",
    "category": 1,
    "state": true
  },
  {
    "id_operation": 5,
    "user_email": "[email protected]",
    "concept": "Cobro de sueldo ",
    "amount": "80000",
    "date": "2021-04-29T03:00:00.000Z",
    "type": "egreso",
    "category": 2,
    "state": true
  },
  {
    "id_operation": 7,
    "user_email": "[email protected]",
    "concept": "Cobro de sueldo",
    "amount": "70000",
    "date": "2021-04-29T03:00:00.000Z",
    "type": "ingreso",
    "category": 4,
    "state": true
  },
  {
    "id_operation": 9,
    "user_email": "[email protected]",
    "concept": "cobro de sueldo",
    "amount": "70000",
    "date": "2021-04-29T03:00:00.000Z",
    "type": "ingreso",
    "category": 4,
    "state": true
  },
]

Estos datos los muestro en una tabla. Lo que quiero hacer es un filtrado sobre este array de objetos que esta en el useState,seteando el estado con los objetos que cumplan con la condicion del filtrado y mostrarlos en la tabla. El filtrado es solo por tipo, o por tipo y categoria al mismo tiempo, es decir: si por ejemplo en el select de tipo de operacion se elige "ingreso", devuelva todos los objetos que sean de tipo operacion ingreso. Si ademas se elige una categoria, devolveria por tipo y categoria.

introducir la descripción de la imagen aquí

El boton search en el evento onClick llama a una funcion filter(), esta funcion toma las opciones elegidas de los select (hasta este punto lo hice bien) pero necesito que el map me devuelva los objetos. De la forma que lo hice no funciona. No quiero marearlos con el codigo porque lo que me faltaria es que en la funcion filter(), el map devuelva los objetos segun el filtrado. De todos modos les muestro todo el codigo:

const OperationsList = (props) => {
  const [stateOperations, setStateOperations] = React.useState([]);
  const [checkCat, setCheckCat] = React.useState(false); // estado del checkbox de categoria
  const [type, setType] = React.useState("ingreso"); // valor del select type
  const [stateCategory, setStateCategory] = React.useState(1); // valor del select category
  
  React.useEffect(() => {
    setStateOperations(props.operations);
  }, [props.operations]);

  const filter = (e) => {

    // si el checkbox de categoria esta en true
    if(checkCat){
      alert('filtra por categoria y tipo')
      console.log('TYPE: ' + type);
      console.log('CATEGORIA: ' + stateCategory);
      
      setStateOperations(stateOperations.map(item => item.category === stateCategory && item.type === type));
    }
    else{
      alert('filtra solo por tipo');
      console.log('SOLO TYPE: ' + type);
      setStateOperations(stateOperations.map(item => item.type === type));     
     
    }
  }
  
  return (
    <Fragment>
      <div id="box-check">
        <div className="d-flex mb-3">
          <Form.Check label="Tipo:" checked className="mt-1" />
          <select
            className="form-select"
            value={type}
            onChange={(e) => {
              const selectedType = e.target.value;
              setType(selectedType);
            }}
          >
            <option value="ingreso">Ingreso</option>
            <option value="egreso">Egreso</option>
          </select>
        </div>
        <div className="d-flex">
          <Form.Check
            className="mt-1"
            label="Categoria:"
            checked={checkCat}
            onChange={(e) => {
              setCheckCat(!checkCat);
            }}
          />
          <select
            // se muestra cuando el check category esta checked
            hidden={!checkCat}
            className="form-select"
            onChange={(e) => {
              const selectedCategory = e.target.value;
              setStateCategory(selectedCategory);
            }}
          >
            {props.categories.map((item) => (
              <option key={item.id} value={item.name}>
                {item.name}
              </option>
            ))}
          </select>
        </div> 
        <button className="btn btn-info" onClick={filter}>search</button>
      </div>

      <div className="table-responsive">
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Concepto</th>
              <th>Monto</th>
              <th>Tipo</th>
              <th>Categoria</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {stateOperations.map((item) => (
              <tr key={cont++}>
                <td>
                  {moment(item.registration_date)
                    .subtract(10, "days")
                    .calendar()}
                </td>
                <td>{item.concept}</td>
                <td>{item.amount}</td>
                <td>{item.type}</td>
                <td>{item.category}</td>
                <div className="text-center">
                  <button className="btn btn-primary">
                    <FontAwesomeIcon icon={faEdit} />
                  </button>
                  <button className="btn btn-danger">
                    <FontAwesomeIcon icon={faTrash} />
                  </button>
                </div>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </Fragment> 
  );  
};

5
  • 1
    estas utilizando un map para filtrar datos, deberías utilizar un filter como buena practica, prueba utilizando esto setStateOperations(prev => prev.filter(item => item.category === stateCategory && item.type === type));
    – Enzo
    el 12 may. 2021 a las 17:10
  • cuando intentas filtra los datos los alert que muestran aparecen ?
    – Enzo
    el 12 may. 2021 a las 17:18
  • proba quitando el filtrado de los condicionales, si de esta manera el estado se cambia podrías agregar una función para los filtrados por tipo y para categorías omitiendo los condicionales
    – Enzo
    el 12 may. 2021 a las 17:24
  • tuve errores parecidos e incluyendo condicionales, donde los condicionales me daban errores, fue por eso que sugerí quitar los condicionales para descartarlos del problema, la verdad que es muy raro que no se vuelva a renderizar tu componente siendo y cuando que estas actualizando el estado del mismo
    – Enzo
    el 12 may. 2021 a las 19:31
  • @Enzo tenia un error que me acabo de dar cuenta, tu codigo esta bien, solo que tenia como value en el select el id de categoria, cuando tenia que poner el nombre de la categoria, por esa razon al hacer el filtro, estaba comparando el id con el nombre y por supuesto no habia coincidencia, asi que gracias y borro los comentarios de mas
    – Claudio
    el 12 may. 2021 a las 21:00

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.