TypeError: Object(...) is not a function 错误在 useAccordianToggle

Question

I'm new to react. I'm using react-bootstrap and trying to create an accordion having more than 20 cards in it. Each card header has a right/down pointing caret icon. I want to toggle the icon to point down or point right based on whether the card body is collapsed or not. So, i tried implementing the example from react-bootstrap website Custom Toggle with Expansion Awaremess and I'm getting the above error at the line

 const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey),
    ); 

The complete code is below.

    import React, {useContext} from 'react';
    import Accordion from 'react-bootstrap/Accordion';
    import useAccordionToggle from 'react-bootstrap/AccordionToggle';
    import AccordionContext from 'react-bootstrap/AccordionContext';
    import Card from 'react-bootstrap/Card';
    import 'bootstrap/dist/css/bootstrap.min.css';

    function ContextAwareToggle({ children, eventKey, callback }) {
    const currentEventKey = useContext(AccordionContext);

    const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey),
    );

   const isCurrentEventKey = currentEventKey === eventKey;

   return (
    <button
      type="button"
      style={{ backgroundColor: isCurrentEventKey ? 'pink' : 'lavender' }}
      onClick={decoratedOnClick}
    >
      {children}
    </button>
  );
}

function App() {
  return (
    <Accordion defaultActiveKey="0">
    <Card>
      <Card.Header>
        <ContextAwareToggle eventKey="0">Click me!</ContextAwareToggle>
      </Card.Header>
      <Accordion.Collapse eventKey="0">
        <Card.Body>Hello! I'm the body</Card.Body>
      </Accordion.Collapse>
    </Card>
    <Card>
      <Card.Header>
        <ContextAwareToggle eventKey="1">Click me!</ContextAwareToggle>
      </Card.Header>
      <Accordion.Collapse eventKey="1">
        <Card.Body>Hello! I'm another body</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
);
}


export default App;

I even tried setting my own context like below

import React from 'react';

export default React.createContext(null);

But I'm still getting the same error!

Also, i have come across examples of using css to achieve this but i do not have a choice of using different libraries like fontawesome. Is there a better way to implement what I'm looking for? Thanks.

Answer 1

I figured it out and it was a silly mistake. i had to use {} around useAccordianToggle import statement as below.

import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';