Utilizing React and Material-UI, I've implemented data filtering using filter and map methods. However, I noticed that when I click on a button, all CSS properties update correctly except for the background color, which only updates after clicking outside the area once after the button click.
Below is the snippet of my code:
const years = [2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020];
const Cards=()=>{
const [activeYear, setActiveYear] = useState(null);
...
// filter button
{years.map((yr,index)=>(
<Grid item xs={12} sm={4} lg={6} style={{padding:'8px'}}>
<Chip
key={index}
label={yr}
onClick={e=> handleYear(e,yr)}
className={activeYear==years[index]?classes.activeYear:''}
/>
</Grid>
)
)}
......
}
You can access the sandbox via this link: https://codesandbox.io/s/filter-using-tag-e65yy?file=/src/Cards.js