Necesito ayuda para agregar una función como si el usuario hiciera clic en el botón, cambia el color al danger de un botón para que parezca que está seleccionado y si el usuario hace clic en el mismo botón, debería volver al color original como primary . .
También quiero que sea un poco dinámico para que sepa qué botón se está seleccionando en los objetos asignados.
Tengo el siguiente código por ahora.
<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>También se está ejecutando en CodeSandBox.
Si me puede dar una pequeña idea de cómo abordar esto?
Intenté usar useState para ese propósito
onClick={() => setCls((cls) => (cls === "red" ? "green" : "red"))Pero eso cambia el color de todos los botones con un solo clic, puedes verlo en codesandbox.
prueba este código:
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;