CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Young L.
Young L.

Reputation: 1042

How to use custom element as dropdown button in React Bootstrap

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

Upvotes: 1

Views: 1181

Answers (1)

Mikhail Kuchma
Mikhail Kuchma

Reputation: 583

React.forwardRef is a generic method.

I've tried

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

and it works without errors.

Upvotes: 1

Related Questions