im making a react code, it is supposed to grab each value from cardInfo and put it in cards and be able to search and filter each card, this works fine and the filter as well. Although when i add the input with the const [searchTerm, setSearchTerm] = useState(”); I end up with a white screen.
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 ProductsFilter
