React: React-Bootstrap Collapse is not working

Question

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!

Answer 1

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

Answer 2

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!