Tengo un problema a continuación en el que el filtro no funciona correctamente. Según el código a continuación, tengo algunos datos que estoy mostrando en la tabla y tengo una columna de estado, es decir, activa o inactiva. Quería filtrar la tabla según el estado activo o inactivo. Entonces, cuando traté de filtrar en función de Activo, funciona pero no funciona para el estado Inactivo ya que la tabla se vacía. Y lo mismo sucedió cuando intento con Inactivo primero, luego filtra correctamente la tabla, pero esta vez no funciona para el estado activo ya que la tabla se vacía. Por lo tanto, no conserva el estado de los datos originales. En general, quería cambiar entre el estado Activo e Inactivo.
import React, { useState } from "react"; const initialData = [ { id: 1, name: "Mayank Kumar", email: "mayankkumar@gmail.com", status: "Active", }, { id: 2, name: "Jitender Kumar", email: "jitenderskumar@gmail.com", status: "Inactive", }, ]; const TableDemo = () => { const [data, setData] = useState(initialData); const filterData = (value) => { const filterData = data.filter((item) => item.status === value); setData(filterData); }; return ( <div> <table> <thead> <tr> <th style={{ textAlign: "center" }}>No.</th> <th style={{ textAlign: "center" }}>Name</th> <th style={{ textAlign: "center" }}>Email</th> <th style={{ textAlign: "center" }}>Status</th> </tr> </thead> <tbody> {data.map((item, index) => { return ( <tr key={item.id}> <th scope="row">{index + 1}</th> <td>{item.name}</td> <td>{item.email}</td> <td>{item.status}</td> </tr> ); })} </tbody> </table> <label>Status:</label> <button onClick={() => filterData("Active")}>Active</button> <button onClick={() => filterData("Inactive")}>Inactive</button> </div> ); }; export default TableDemo;Lo que sucede aquí es que cuando filtra la primera vez para "Activo", está configurando nuevos elementos sin los que están "Inactivos", por lo que básicamente pierde los datos de esa manera.
En su caso, no hay necesidad de almacenar sus datos dentro del estado. Un mejor enfoque sería almacenar un filter dentro del estado y luego calcular condicionalmente los valores que necesita en el renderizado.
const [filter, setFilter] = useState('All') // use filteredData to map and render the items const filteredData = initialData.filter(item => { if (filter === 'All') { return true } return item.status === filter }) // use filterData function to set the filter const filterData = (value) => { setFilter(value); };