I have been working on a practice mini project with ReactJS of displaying a dynamic table with a mock API which should have sorting and searching as its functionality, I am stuck on how to search the data from the API and display only those rows of the table which matches any one column value of a row. here's the code:
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;
Apart from this, Table and Footer Component are just to display the received data. I have tried multiple ways but cannot get around how to display it dynamically