I wanted to create a e-merce 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(``).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

I wanted to create a e-merce 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./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

• javascript
• reactjs
• react-router-dom
• react-bootstrap

5 Answers 5

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

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

1. 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" }.
2. You also need to add category in useEffect dependency, to re-fetch products every time category is updated.

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]);

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.

Remove the curly braces when paring the element.

__YOUR CODE

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

__NEW

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

You are still listing all products because in your code you are looping through the productList state instead of the new value which e 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./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