Este es el código de mi componente de búsqueda, contiene la entrada de búsqueda que devuelve un resultado de búsqueda
function Search (props) { const [search, setSearch] = useState("") function handleSearch(e){ setSearch(e.target.value) }; const filtered = !search ? data : data.filter((car) => car.name.toLowerCase().includes(search.toLowerCase()) ); return( <> <div className="search-container"> <input value={search} onChange={handleSearch} className="searchbox" type='text' placeholder="Find a car.."/> </div> </> ) }este es mi COMPONENTE DE AUTOS muestra las listas colectivas de autos de mis datos
function Cars (){ return( <> <div className="cars-container"> {data.map((car) =>{ return ( <div className="cars-wrapper" key={car.number}> <img className='car-image' src={car.image} alt="mercedez" /> <h4>{car.name}</h4> <p>{car.model}</p> <Link style={{fontSize: '1rem'}} to={`/cars/${car.number}`}>Mind blowing features</Link> </div> ) })} </div> <Outlet /> </> ) } export {Cars}Ahora mi pregunta es, ¿cómo puedo pasar el componente CARS al componente SEARCH para que se muestre cada vez que se use la entrada de búsqueda para buscar un automóvil?
Bien, hay varias maneras de hacer esto.
Como esto:
const Parent () => { const [filtered, setFiltered] = useState(''); const handleFilter = (data) => { setFiltered(data) } return (<> <Search setFiltered={handleFilter}/> <Cars data={filtered}/> </>) }Se trata de ganchos personalizados: https://reactjs.org/docs/hooks-custom.html