Adding and removing (toggle) active class on React

Suleyman 0
Viewed 20

I am changing the state with onClick and adding a border to the data of that state name. But when I click the other boxes, the previously added border is not removing. Here is my code;

    const [toggleState, setToggleState] = useState(null);

  return (
    <React.Fragment>
        <Col sm="6">
        <Card className="text-center">
          <CardBody onClick={() => setToggleState(user.name)} className={toggleState === user.name ? 'selectedItem' : '' + ' cursorPointer'} >
            <Row onClick={event => props.onChange('true')}>
                <Col sm="4">
                </Col>
            </Row>
          </CardBody>
         </Card
         </Col>
       </React.Fragment>

enter image description here

react-state-management react-state reactjs javascript
1 Answers

Hard to say what the className you're looking to set is, but Unmitigated seems to have a good idea about that issue. I also noticed that you don't close your

</Card

correctly on the third row from the bottom, this might affect how the page behaves as well.

Junghard0
Related