How to filter array to match params value with react

Question

I wanted to create a e-commerce web application using react-bootstrap. I want the page to show different item based on category so if the URL is product/men'sclothing i want to filter my array and show only the product that have same category which is men's clothing (my path: product/:category). I already tried to filter my array using .filter method but it didn't work, it still show all product from various category, How can I fix it ?

Categorized product page:

const ProductList = () => {
  const { category } = useParams()
  const[productList, setProductList]= useState();

  useEffect(() =>{
    axios.get(`https://fakestoreapi.com/products`).then(res => {
        const products = res.data;
        setProductList(products);

        var filteredCategory =
         productList.filter((productList) =>productList.category === {category})
      })
  }, []);

  console.log(productList)

  return (
    <>
      <Row>
        <h1> This is {category} paged</h1>
        {productList && productList.map(product =>{
          const {id, title, price, category,description,image} = product;
          return(
          <Col lg={3} className="d-flex">
            <Card key={id} className="flex-fill productlist">
              <Card.Img variant="top" src={image} />
              <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Card.Text>{category}</Card.Text>
                <Card.Text>
                  Current Price: {price}
                </Card.Text>
                <Button variant="primary">Add to cart</Button>
              </Card.Body>
            </Card>
          </Col>
          )
        })}
      </Row>
    </>
  )
}

export default ProductList

Gunjan Bangde · Accepted Answer · 2022-02-19 06:03:24Z

2

In the filter function that you have used, try writing it as

productList.filter((product) => product.category === category)

When you write it as {category}, a object is created with key category and the value as the actual value. For example if value of category is shoes, it will create a object, { category: "shoes" }.
You also need to add category in useEffect dependency, to re-fetch products every time category is updated.

answered Feb 19, 2022 at 6:03

Gunjan Bangde

211 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paiman Rasoli · Accepted Answer · 2022-02-19 05:59:13Z

1

First, add a dependency to your UseEffect then remove the bracket inside the filter.

useEffect(() => {
  async function getByCategory(){
   const req = await fetch(URL):
   const res = await req.json();
   const filter = res.filter((item) => item.category === category);
   setProductList(filter);
  }
  // check if params exits
  if(category){
      getByCategory();
  }
}, [category]);

answered Feb 19, 2022 at 5:59

Paiman Rasoli

1,2241 gold badge8 silver badges18 bronze badges

Comments

hogreflector · Accepted Answer · 2022-02-19 06:02:42Z

1

Try getting rid of the {} around the category variable in the filter function. The filter function is not inside the return statement and thus plain js (not jsx).

Also, you're never using the array containing the filtered products. I'd suggest to filter the products you get from axios, take the filtered products and put THEM into state with setProductList.

Was not able to test this since I'm on mobile, but give it a try.

answered Feb 19, 2022 at 6:02

hogreflector

3783 silver badges10 bronze badges

Comments

Sharan Balakrishnan · Accepted Answer · 2022-02-19 06:04:29Z

1

Remove the curly braces when comparing the element.

__YOUR CODE

productList.filter((productList) =>productList.category === {category})

__NEW

productList.filter((productList) =>productList.category === category)

answered Feb 19, 2022 at 6:04

Sharan Balakrishnan

3781 silver badge10 bronze badges

Comments

Yves Kipondo · Accepted Answer · 2022-02-19 06:05:11Z

You are still listing all products because in your code you are looping through the productList state instead of the new value which come from the filtered data.

{productList && productList.map(product =>{
    // this is the way you have defined your map code
}) }

It should be like this

const ProductList = () => {
    const { category } = useParams()
    const[productList, setProductList]= useState();


    useEffect(() =>{
    axios.get(`https://fakestoreapi.com/products`).then(res => {
        const products = res.data;
        setProductList(products);
        })
    }, []);

    let filteredProducts = null;

    if(category) {
        filteredProducts = productList.filter((productList) => productList.category === category);
    } else {
        filteredProducts = products;
    }
         

    return (
        <>
          <Row>
            <h1> This is {category} paged</h1>
            {filteredProducts && filteredProducts.map(product =>{
               // some code 
            })}
          </Row>
        </>
    )
}

export default ProductList

As you can see I define a variable filter Products which contains products related to the category get from the url when It's present otherwise it will use the entire list of products

Collectives™ on Stack Overflow

How to filter array to match params value with react

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related