CODEWITHSUNDEEP
javascriptreactjsreact-redux
Gandom
Gandom

Reputation: 191

How to show list items after state changes in react-redux

I have a menu bar that shows category of my shop. When I click on a category a product list of that category should be shown on my shop component (also I use redux library). It works correctly for first time, but when I click on another category the state changes and the filter products update too but they don't show on my shop component. I must click a button on page to show updated list in shop component. How can I show them immediately after updating?

App.jsx

<Menubar/>
<Routes>
  <Route path='/shopping' element={<Shop />}></Route>
</Routes>

Menubar.jsx

export default function MenuBar() {
  const products = useSelector(state=>state.products);
  const navigate = useNavigate();
 
  const getCategory = (e) => {
    let category = e.target.innerText;
    dispatch(filterProByCategory(products, category));
    navigate('/shopping');
  }

  return (
    <>
      <ul>
        <li onClick={(e)=>getCategory(e)}>
          Fashion
        </li>
      </ul>
    </>
  )
}

Shop.jsx

export default function Shop() {
  const products = useSelector(state => state.filters.filterProducts);
  const [filterProducts, setFilterproducts] = useState(products);

  return (
    <>
      <Grid item xs={12} md={8} dir='rtl'>
        <Card sx={{ minWidth: 275 }}>
          <CardContent>
            {/*  */}
            <Grid container spacing={1}>
              {filterProducts && filterProducts.map((product, index) => (
                <Grid item xs={12} md={4}>
                  <ProductCard product={product} key={index} />
                </Grid>
              ))}
            </Grid>
    </>
  )
}

Upvotes: 1

Views: 103

Answers (1)

Kaneki21
Kaneki21

Reputation: 1420

Just use the direct result of products instead of using it for creating another state variable filteredProducts with useState

export default function Shop() {
  const products = useSelector(state=>state.filters.filterProducts);
//  const [filterProducts , setFilterproducts] = useState (products);
  return (
  <>
      <Grid item  xs={12} md={8} dir='rtl'>
                <Card sx={{ minWidth: 275 }}>
                <CardContent>
                  {/*  */}
                  <Grid container spacing={1}>
                 
                  {products && products.map((product , index)=>(
                     <Grid item xs={12} md={4}>
                    <ProductCard product={product} key={index}/>
                    </Grid>
                  ))}
                </Grid>
  </>
 )
}

Upvotes: 1

Related Questions