Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

119
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda