Use class based components instead of function based components

[ohlr]

function based components do not accept refs.

In a scenario like this https://material-ui.com/components/menus/#menulist-composition the button needs to hold a ref. If it at the same time requires a link functionality I can not simply use Button from this package because then I am getting a function based component.

[oliviertassinari]

React.forwardRef + function components is the solution. Do you have an example where it goes wrong?

[ohlr]

@oliviertassinari You are right it even says it in the browser console:

index.js:2177 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

import { Button } from "gatsby-theme-material-ui";

const anchorRef = React.useRef<HTMLButtonElement>(null);
 <Button ref={anchorRef} > test </Button>

[oliviertassinari]

Ok, I think that we definitely miss a forwarfRef in

https://github.com/hupe1980/gatsby-theme-material-ui/blob/cfe266bec4aa4cb651bd60c1f63bb80d07e6463c/packages/gatsby-material-ui-components/src/patch-base-button-components.tsx#L10

[ohlr]

@ohlr https://github.com/ohlr/gatsby-mui-theme-bug/blob/master/src/pages/index.js with this you should be able to reproduce.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ohlr]

activity