How to use custom element as dropdown button in React Bootstrap

Question

Hi I have a problem with my component. I am using React bootstrap but i need to make button which toggle menu on click to by FontAwesomeIcon and not button.

here is example of my code:

render() {
        return (
            <Dropdown>
                <Dropdown.Toggle variant="success" id="dropdown-basic">
                    <FontAwesomeIcon icon={faCog}
                                     className={' m-1 fore-secondary fore-secondary-hoverable button-cursor'}/>
                </Dropdown.Toggle>
            </Dropdown>
        );
    }

But in this case the dropdownToggle make button and it puts inside my FontAwesomeIcon element. I need just to make that icon to by button. How can I do that please?

Edit: I found this on documentation:

  const CustomToggle = React.forwardRef(({ children, onClick }, ref:any) => (
            <a
                href=""
                ref={ref}
                onClick={(e) => {
                    e.preventDefault();
                    onClick(e);
                }}
            >
                {children}
                &#x25bc;
            </a>
        ));

These then apply on Dropdown.Toggle as={CustomToggle}....

Problem is I am using typescript and this not work :/ Ia m getting this error :/

Property 'onClick' does not exist on type '{ children?: ReactNode; }'.  TS2339

Mikhail Kuchma · Accepted Answer · 2020-09-28 10:25:03Z

1

React.forwardRef is a generic method.

I've tried

 React.forwardRef<any, DOMAttributes<any>>(({children, onClick}, ref) => ( ... );

and it works without errors.

answered Sep 28, 2020 at 10:25

Mikhail Kuchma

5832 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use custom element as dropdown button in React Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related