How to make button color change if button selected and unselected

Question

I need help to add a feature like if the user clicked on the button it changes the color to danger of a button so it would feel like it is selected and if the user clicks the same button it should come back to the original color like primary.

I want to make it a little dynamic as well so it should know which button is being selected in the mapped objects.

I have the following code for now.

       <Row xs={3} md={4} className="g-3 py-2 px-2">
          {data.map((postData) => {
            return (
              <Button
                className="mx-2"
                style={{
                  width: "10rem",
                  height: "13rem",
                  lineHeight: "14px",
                  fontSize: "12px"
                }}
                key={postData.id}
              >
                <Card.Img variant="top" src={postData.image} />
                <Card.Body>
                  <Card.Title className={style.tile}>
                    {postData.title}
                  </Card.Title>
                </Card.Body>
              </Button>
            );
          })}
        </Row>

It's also running in the CodeSandBox

If you can give me a little idea of how to approach this?

I tried using useState for that purpose

onClick={() => setCls((cls) => (cls === "red" ? "green" : "red"))

But that changes the color of all the buttons at one click, you can see this in codesandbox.

Answer 1

try this Code :

import React, { useState } from "react";

//react bootstrap components
import { Container, Row, Card, Button } from "react-bootstrap";

//scss
import style from "./styles.module.scss";

//data for post
import data from "./data.json";

const App = () => {
  const [selectedBtnList,  setSelectedBtnList] = useState([])

const selectBtnAddHandler = (btnId) => {
 const isInList = selectedBtnList.some(item => item === btnId)
 if(isInList){
  setSelectedBtnList(selectedBtnList.filter(item => item !== btnId))
 }else {
  setSelectedBtnList([...selectedBtnList,btnId])
 }
}
  return (
    <>
      <Container fluid={true}>
        <Row xs={3} md={4} className="g-3 py-2 px-2">
          {data.map((postData) => {
            return (
              <Button
                className="mx-2"
                style={{
                  width: "10rem",
                  height: "13rem",
                  lineHeight: "14px",
                  fontSize: "12px"
                }}
                key={postData.id}
                variant={selectedBtnList.includes(postData.id) ? "danger" : "primary"}
                onClick={()=> selectBtnAddHandler(postData.id)}
              >
                <Card.Img variant="top" src={postData.image} />
                <Card.Body>
                  <Card.Title className={style.tile}>
                    {postData.title}
                  </Card.Title>
                </Card.Body>
              </Button>
            );
          })}
        </Row>
      </Container>
    </>
  );
};

export default App;