He creado una base de datos en firebase y la he buscado en react, funciona correctamente, pero quiero incluir una barra de búsqueda para filtrar los elementos, mi problema es que cuando busco un elemento todo funciona pero cuando borro el texto de la entrada de búsqueda los elementos no vuelven a aparecer.
import { db } from "../firebase"; import { Link } from "react-router-dom"; import "../App.css"; const Productos = () => { const [productos, setProductos] = useState([]); const getLinks = async () => { db.collection("links").onSnapshot((querySnapshot) => { const docs = []; querySnapshot.forEach((doc) => { docs.push({ ...doc.data(), id: doc.id }); }); setProductos(docs); }); }; const handelSearch = (e) => { const cadena = e.target.value.toLowerCase(); const limite = Productos.length; //console.log(cadena); let tempArray = []; for (let i = 0; i < limite; i++) { const etiquetas = productos[i].description.toLowerCase(); const patron = new RegExp(cadena); const res = patron.test(etiquetas); if (res) { tempArray.push(productos[i]); } } setProductos(tempArray); }; useEffect(() => { getLinks(); }, []); return ( <> <input type="text" placeholder="Buscar" className="search" onChange={handelSearch} name="busqueda" /> <div className="productos" name="c" id="c"> <div className="grid-prod"> {productos && productos.map((link) => ( <div itemID={link} className="card mb-1" key={link.id}> <div className="card-body"> <div className="d-flex justify-content-between"> <div className="contenedor-img"> <img className="img-producto" alt="producto" src={link.img} ></img> </div> </div> <h4 className="text-secondary titulo">{link.titulo}</h4> <h1 className="text-secondary titulo">{link.categoria}</h1> <Link to={"/" + link.url} rel="noopener noreferrer"> <button className="btn-prod">Ver producto</button> </Link> </div> </div> ))} </div> </div> </> ); }; export default Productos;```Puede establecer otra matriz de estado que realice un seguimiento de todos los productos.
ex:
const [productos, setProductos] = useState([]); const [allProductos, setAllProductos] = useState([]); const getLinks = async () => { db.collection("links").onSnapshot((querySnapshot) => { const docs = []; querySnapshot.forEach((doc) => { docs.push({ ...doc.data(), id: doc.id }); }); setProductos(docs); setAllProductos(docs); }); }; function handleSearchChange(event) { setSearchValue(event.target.value); search(event.target.value); } function search(searchValue) { setProductos(allProductos); if(searchValue != ""){ /* perform search logic here */ setProductos(tempArray); } }Intente como a continuación, he usado datos de prueba del marcador de posición JSON y mi archivo App.js
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Search from "./components/Search" function App() { return ( <div className="App"> <Search /> </div> ); } export default App;Archivo JS del componente de búsqueda:
import React from 'react'; class Search extends React.Component{ constructor(){ super(); this.state = { data:'', items: [] } this.filterList = this.filterList.bind(this); } componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then( (result) => { this.setState({data: result}); } ) } filterList(event){ var updatedList = this.state.data; console.log('-----------------',updatedList) updatedList = updatedList.filter(function(item){ return item.name.toLowerCase().search( event.target.value.toLowerCase()) !== -1; }); this.setState({items: updatedList}); } componentWillMount(){ this.setState({items: this.state.data}) } render(){ return ( <div> <form> <fieldset> <input type="text" placeholder="Search" onChange={this.filterList}/> </fieldset> </form> <List items={this.state.items}/> </div> ); } } class List extends React.Component{ render(){ return ( <ul> {this.props.items && this.props.items.map(function(item) { return <li key={item.name}>{item.name}</li> }) } </ul> ) } }; export default Search;