He estado trabajando en un mini proyecto de práctica con ReactJS para mostrar una tabla dinámica con una API simulada que debería tener clasificación y búsqueda como su funcionalidad, estoy atascado en cómo buscar los datos de la API y mostrar solo esas filas de la tabla que coincide con cualquier valor de columna de una fila. aquí está el código:

 import React, { useCallback } from 'react'; import {useState, useEffect} from 'react' import './App.css'; import Header from './components/Header.js' import Table from './components/Table.js' import Footer from './components/Footer.js' function App() { const [userData, setuserData] = useState([]) const [keys, setKeys] = useState([]) const [search, setSearch]= useState('') const [filter, setFilter]=useState([]) const handleChange = (e)=>{ e.preventDefault() setSearch(e.target.value.toLowerCase()) setFilter(searchTable(userData)) } function searchTable(rows){ if(!search) return rows console.log(rows.map(row=>row.id), rows.map(row=>row.name)) return rows.filter(row => {return Object.keys(row)===search}) } const getData = async (callback)=> { await fetch('https://gorest.co.in/public/v1/users') .then((response)=> { if(!response.ok) throw new Error('Http Error: ', response.status) return response.json() }) .then((response)=> { callback(response); return response; }) .finally(console.log('successfully fetched!')); } useEffect(()=> { getData((response)=> { setuserData(response.data) setFilter(response.data) // console.log(response.data) setKeys(Object.keys(response.data[0]).map((key) => key)); }) }, [search]) return ( <div className="App"> <h1>Users</h1> <input type="text" placeholder='search' onChange={handleChange} value={search}/> <Table userData={filter} keys={keys}/> <Footer /> </div> ); } export default App;

Aparte de esto, los componentes de tabla y pie de página son solo para mostrar los datos recibidos. Lo he intentado de varias maneras, pero no sé cómo mostrarlo dinámicamente.