Estoy tratando de encontrar una manera de crear un componente de búsqueda <SearchBar /> y mostrar la matriz de resultados a través de otro componente <TableData /> . Logré construirlo hasta cierto punto, pero no muestra el resultado deseado. El problema es que no muestra los datos hasta que empiezo a escribir. Cuando el componente principal se cargó por primera vez o realicé una actualización, los datos desaparecieron. Además, cuando el componente principal se carga por primera vez, los filterProjects de useState representan una matriz vacía.

¿Cómo puedo mostrar todos los datos cuando se cargan los componentes?

Aquí está mi bloque de código:

 const Overview = () => { const appCtx = useContext(AppContext); // Copy the incoming data from the context const newFilterCopy = [...appCtx.projects]; // Create new state for filtered data const [filterProjects, setFilterProjects] = useState(newFilterCopy); // Function that takes the input coming from the SearchBar component const filterFunc = (input) => { if (input === '') { setFilterProjects(filterProjects); } const resultProjects = newFilterCopy.filter((project) => project.projectCompanyName.toLowerCase().startsWith(input.toLowerCase()) ); setFilterProjects(resultProjects); return resultProjects; }; return ( <div className={classes.Overview}> <Container> <SearchBar placeholder='Search project by company name' onInput={filterFunc} /> <div className={classes.TableContainer}> <ExportBtn /> <TableData data={filterProjects} /> </div> </Container> </div> ); }; export default Overview;