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.
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;