por ej. Tengo datos de covid y los muestro en la tabla de reacción que contiene columnas como continente, país, casos nuevos, casos totales, casos activos, muertes, etc. ahora quiero filtrar en la tabla donde devuelve la fila si ingreso el condado o el nombre del continente si ingreso cualquier otra clave en el campo de entrada, no debería devolver nada en la tabla, solo mostrar el resultado no encontrado.
función de filtro global:
function GlobalFilter({filter, setFilter}) { const[value, setValue] = useState(filter); const onChange = useAsyncDebounce((value)=>{ setFilter(value || undefined); }, 1000); return ( <div className='filter'> <input value={filter || ''} onChange={(e)=>{ setFilter(e.target.value) onChange(e.target.value)}} placeholder='Enter Country or Continent'/> </div>columna de la tabla:
COLUMNS = [ { Header : 'Continent', accessor : 'continent', }, { Header : 'Country', accessor : 'country', }, { Header : 'Total Cases', accessor : 'totalcases', }, { Header : 'Active Cases', accessor : 'activecases', }, { Header : 'Total Recovery', accessor : 'recovery', }, { Header : 'Total Death', accessor : 'deaths', }, { Header : 'New Cases', accessor : 'newcases', },]
Así es como suelo hacer esto:
const CovidData = () => { const [data, setData] = useState([//your data goes here]) const [filter, setFilter] = useState(null) //null = show all items const filteredItems = filter ? data.filter(elem => elem.country === filter) : data return ( <> <input onChange={e => setFilter(e.target.value)} /> <TableComp items={filteredItems} /> </> ) }Esto no está probado, pero deberías entender la esencia :)