Tengo una función para filtrar una lista con los datos que obtengo de una API, el problema es que no muestra los datos hasta que el usuarios escriba algo en el input. Los datos del Api se guardan en un array dataList y luego este array lo paso a otro setData para filtrar los datos, como estoy declarando el array vacío y se llena hasta que se ejecute useEffect es por eso que no me muestra nada porque al momento de inicializar setData con dataList esta vacío.
Ahora si inicializo asi setData(dataList); por ejemplo en el useEffect cuando se carguen los datos, el filtro no sirve.
Lo que necesito esque al cargar la pagina muestre los datos sin tener que escribir algo en el input ya que eso no es funcional.
Espero haberme dado a entender.
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";
const App = () => {
const url = "https://pokeapi.co/api/v2/pokemon/";
const [dataList, setDataList] = useState([]);
const [searchText, setSearchText] = useState("");
const [data, setData] = useState(dataList);
const peticionGet = async () => {
try {
axios.get(url).then((res) => {
setDataList(res.data["results"]);
});
} catch (e) {
console.log(e.message);
}
};
useEffect(() => {
peticionGet();
}, []);
const handleChange = (value) => {
setSearchText(value);
filterData(value);
};
// filter records by search text
const filterData = (value) => {
const lowercasedValue = value.toLowerCase().trim();
if (lowercasedValue === "") {
setData(dataList);
} else {
const filteredData = dataList.filter((item) => {
return Object.keys(item).some((key) =>
item[key].toString().toLowerCase().includes(lowercasedValue)
);
});
setData(filteredData);
}
};
return (
<>
Search:{" "}
<input
style={{ marginLeft: 5 }}
type="text"
placeholder="Type to search..."
value={searchText}
onChange={(e) => handleChange(e.target.value)}
/>
<table
className="table table-hover"
style={{ fontSize: 10, textAlign: "center" }}
>
{data.map((row, i) => {
return (
<tr key={i} className="box">
<td component="th" padding="none">
{row.name}
</td>
<td align="center">{row.year}</td>
<td align="center">{row.color}</td>
<td align="center">{row.pantone_value}</td>
</tr>
);
})}
<div className="clearboth"></div>
{data.length === 0 && <span>No records found to display!</span>}
</table>
</>
);
};
export default App;