How to toggle class when user selects a list item coming from api in react.s?

Question

I'm working on an application where I render the DB results by a loop through using the map method. When the user clicks on each item, first it will add those id's into an array and toggle a CSS class to change the border color of a particular selected item, when the item is selected again, the border will disappear, same goes for all items rendered in the UI. Adding the id's into an array is working fine.

I'm facing a problem toggling CSS style to change the border color when click on each item.

Here is my code to render items on DOM

const [selectedItems, setSelectedItems] = React.useState([])

const onClickHandler = (id) => {
    if (selectedItems.indexOf(id) > -1) {
        let updatedItems = selectedItems.filter(itemID => itemID !== id)
        console.log(updatedItems);
        setSelectedItems(updatedItems)
    } else {
        setSelectedItems(prevState => [...prevState, id] )
    }
    setOpen(true);
}
    
{
    courses.length > 0 && courses.map(course => {
        return (
            <>
                <CourseItem course={course} onClickHandler={onClickHandler} itemSelect={itemSelect} />
            </>
        )
    })
}

function CourseItem({ course, onClickHandler }) {
    const classes = useStyles();
    return (
        <>
             <Col style={{ marginTop: 10 }}>
                    <Paper elevation={0}  className={classes.card}>
                        <div className={classes.cardTop} style={{  backgroundImage: `url('${course.thumbnail}')`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
                            <div style={{ padding: '8px 18px', display: 'flex', justifyContent : 'space-between' }}>
                                <CheckCircleIcon  onClick={() => onClickHandler(course._id)} />
                                {/* <Typography component={"label"} variant="caption"> { course.level }</Typography> */}
                                    <Chip label={course.level} style={{ color: '#000', backgroundColor: '#f9f9f9', fontFamily: 'regular1', position: 'relative', zIndex: 0}} variant="outlined" />
                            </div>
                        </div>
                        <div className={classes.cardBottom}>
                            <Typography> { course.moduleName }</Typography>
                            <Typography variant="subtitle2" component={"span"}> { course.description }</Typography>
                        </div>
                    </Paper>
             </Col>
        </>
    )
}

Answer 1

You can use tow different class for two different condition. Then use clsx to conditionally apply class.

clsx link -> npm clsx