estoy haciendo un código de reacción, se supone que debe tomar cada valor de cardInfo y ponerlo en tarjetas y poder buscar y filtrar cada tarjeta, esto funciona bien y el filtro también. Aunque cuando agrego la entrada con const [searchTerm, setSearchTerm] = useState(''); Termino con una pantalla blanca.
import React from "react"; import { useState } from "react/cjs/react.production.min"; import '../css/productFilters.css'; function ProductsFilter(){ const cardInfo=[ {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"}, {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"}, {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"}, {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"}, ] const renderCard=(card,index)=>{ return( <ul className="card"> <li><img src={card.image}></img></li> <li><p className="tittle-card">{card.title}</p></li> <li><p className="text-card">{card.text}</p></li> </ul> ) } const [searchTerm, setSearchTerm] = useState(''); return ( <div> <input type="text" placeholder="Search..." onChange={ (event) => setSearchTerm(event.target.value)} /> <div className="container"> {cardInfo.filter((val)=>{ if (searchTerm==""){ return val } else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){ return val } }).map(renderCard)} </div> </div> ) } export default ProductsFilterGracias, Prograk:
Estás importando useState incorrectamente. Intente importar useState desde reaccionar, es decir. importar React, {useState} de "react" – prograk
¡El código ya está funcionando! dejo la respuesta
import React, { useState } from "react"; import { Link } from "react-router-dom"; import '../css/productFilters.css'; function ProductsFilter(){ const cardInfo=[ {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"}, {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"}, {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"}, {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"}, ] const renderCard=(card,index)=>{ return( <ul className="card"> <li><img src={card.image}></img></li> <li><p className="tittle-card">{card.title}</p></li> <li><p className="text-card">{card.text}</p></li> </ul> ) } const [searchTerm, setSearchTerm] = useState(''); return ( <div> <input type="text" placeholder="Search..." onChange={ (event) => setSearchTerm(event.target.value)} /> <div className="container"> {cardInfo.filter((val)=>{ if (searchTerm==""){ return val } else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){ return val } }).map(renderCard)} </div> </div> ) } export default ProductsFilter