Started using React-Bootstrap today and I want to make a collapsable card. Using Collapse component but it's not working. Any tips? My code:
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;
Thanks in advance!
CodePudding user response:
Working example by your codes is SandboxCodes , you are forgot to import css file in the index.js like this
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
CodePudding user response:
Thanks Hakob, it worked. It happened that a class "show" was being added, but it was not defined, as I hadn't imported bootstrap. Thank you so much!