Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

120
Views
stuck on how to make searching work in dynamic table in reactjs

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!