Filter object in React

Hi, I’m trying to make a component which will render an array of objects depending on their category name, when the matching button is clicked (example: ‘sport’ button is clicked-all the products with category ‘sport’ appear). So far I was just able to make it render everything. I am having a lot of troubles wrapping my head around this, so I really hope someone can help me out.
Here is the code:
const items = [
{
id:“1”,
name:“LA Clippers”,
price:“24.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${clippers},
type: “vc”,
cat: “sport”
},
{
id:“2”,
name:“Batman”,
price:“25.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${batman},
type: “vc”,
cat: “movies”
},
{
id:“3”,
name:“Metallica”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${metallica},
type: “vc”,
cat: “sport”
},
{
id:“4”,
name:“Spurs”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${spurs},
type: “vc”,
cat: “sport”
},
{
id:“5”,
name:“Spiderman”,
price:“30.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${spiderman},
type: “vc”,
cat: “movies”
},
{
id:“6”,
name:“Denver”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${denver},
type: “vc”,
cat: “sport”
},
{
id:“7”,
name:“I Love Dog”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${ilovedog},
type: “vc”,
cat: “other”
},
{
id:“8”,
name:“Iron-man”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${ironman},
type: “vc”,
cat: “movies”
},
{
id:“9”,
name:“Warriors”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${warriors},
type: “vc”,
cat: “sport”
},
{
id:“10”,
name:“Dog”,
price:“27.99”,
desc: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”,
img: ${dog},
type: “vc”,
cat: “other”
},
];
export default function Products() {

    const dataItems = items.map((product) => {
        return (
            <div className="products-card"> 
                <img key={product.id} src={product.img} />
                <p className="product-name">{product.name}</p>
                <span className="price">${product.price}</span>
            </div>
        );
    });
    return (<div className="products-container">{dataItems}</div>)

}

Please post only formatted code: https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/28351

As you describe, you want to filter the items on button click. So add a button with an onClick event handler.
Use a state hook with the filtered items and map the items stored in the state rather than all items.
In the event handler, set the state.

Spoiler
const [filteredItems, setFilteredItems] = useState([]);
const handleClick = cat => {
  setFilteredItems( // use a callback function with the previous state here and filter items by category prop )
}

return filteredItems.map(item => ...)
2 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.