CODEWITHSUNDEEP
reactjsmaterial-ui
istvan kolkert
istvan kolkert

Reputation: 152

Trying to select menuItems in a seperate component - how to solve 'function components cannot be given refs' error?

I am trying to move my menuitems in a select field to a separate component, since I have to use the same menuitems twice it seemed the best way to just move them to a separate component. But it doesn't work like I would expect it to.

this works fine (since its in the same component):

<TextField
  select
  variant="outlined"
  fullWidth
  label="local menuitems"
  onChange={(e) => {
    console.log("Local running");
    setLocalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={localValue}
>
    <MenuItem value="1">MenuItem 1</MenuItem>
    <MenuItem value="2">MenuItem 2</MenuItem>
    <MenuItem value="3">MenuItem 3</MenuItem>
</TextField>

This doesnt (since its a separate component):

<TextField
  select
  variant="outlined"
  fullWidth
  label="External menuitems"
  onChange={(e) => {
    console.log("External running");
    setExternalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={externalValue}
>
    <MenuItems />
</TextField>

and MenuItems returns:

<Fragment>
  <MenuItem value="1">MenuItem 1</MenuItem>
  <MenuItem value="2">MenuItem 2</MenuItem>
  <MenuItem value="3">MenuItem 3</MenuItem>
</Fragment>

I made a CodePen https://codesandbox.io/s/infallible-wilson-u4so6?file=/src/App.js

The first example is using the menuitems locally, the second in a different component. The menuitems are shown correctly but they don't work, I also noticed that this error shows up

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

As Omer pointed out the menuItems need to be direct children, so i will need to use forwardRef, now I havent used forwardRef and ref's in general so how would i use this in my case? And if you happen to know how it would work if the MenuItems component is using redux connect() that would be awesome!

Upvotes: 3

Views: 492

Answers (1)

Omer
Omer

Reputation: 3486

Use select as in Material-UI

we must send children:

Material-UI: `children` must be passed when using the `TextField` component with `select`.

in documentation we can see this - it's mean we can't use external items. enter image description here

the solution for that is to use forwardRef(), but it's not a good one.

Upvotes: 1

Related Questions