Comencé a usar React-Bootstrap hoy y quiero hacer una tarjeta plegable. Usando el componente Collapse pero no funciona. ¿Algun consejo? Mi código:
import { RiArrowDownSLine, RiArrowUpSLine } from "react-icons/ri"; import { Collapse } from "react-bootstrap"; import "./Card.css"; const Card = (props) => { const data = props.data; var [isToggled, setToggle] = useState(false); console.log(isToggled) return ( <div className="wrapper"> <div className="header spbtw"> <div className="header-title ml1"> {props.title || `Insira um tìtulo`} </div> <RiArrowDownSLine className="arrow mr1" size={25} onClick={() => setToggle(!isToggled)} aria-controls="collapse" /> </div> <Collapse in={isToggled}> <div className="list" id="collapse"> {data.map(d => ( <div className="list-item ml1" key={d["title"]}> {d[`title`]} </div> ))} </div> </Collapse> </div> ); }; export default Card;¡Gracias por adelantado!
El ejemplo de trabajo de sus códigos es SandboxCodes , se olvidó de importar el archivo css en index.js como este import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Gracias Hakob, funcionó. Ocurrió que se estaba agregando una clase "show", pero no estaba definida, ya que no había importado bootstrap. ¡Muchas gracias!