React js @material-ui/core Select Cannot read property 'offsetWidth' of null

Question

I'm using the Select component on @material-ui/core , but I'm having the following problem:

Cannot read property 'offsetWidth' of null

Can you help me out?

Link: codesandbox

Code:

import React from "react";
import {
  Button,
  DialogTitle,
  Dialog,
  DialogContent,
  DialogActions,
  TextField,
  FormControl,
  InputLabel,
  MenuItem,
  Select
} from "@material-ui/core";

function AddUserModal(props) {
  const inputLabelTypeRole = React.useRef(null);
  const { open, onClose } = props;
  const [state, setState] = React.useState({
    labelWidthTypeRole: 0,
    name: ""
  });
  let { labelWidthTypeRole } = state;

  React.useEffect(() => {
    setState({
      ...state,
      labelWidthTypeRole: inputLabelTypeRole.current.offsetWidth
    });
  }, []);

  const onChange = name => ({ target: { value } }) => {
    setState({
      ...state,
      [name]: value
    });
  };

  const [currency, setCurrency] = React.useState(false);

  const handleChange = event => {
    setCurrency(event.target.value);
  };

  return (
    <Dialog
      fullWidth
      maxWidth="md"
      open={open}
      onClose={onClose}
      aria-labelledby="max-width-dialog-title"
    >
      <DialogTitle id="form-dialog-title" style={{ alignSelf: "center" }}>
        Add User
      </DialogTitle>
      <DialogContent>
        <div style={{ margin: 5 }}>
          <TextField
            margin="dense"
            id="name"
            label="Name"
            type="Name"
            fullWidth
            variant="outlined"
            onChange={onChange("name")}
          />
        </div>
        <div style={{ margin: 5 }}>
          <FormControl variant="outlined" fullWidth size="small">
            <InputLabel
              ref={inputLabelTypeRole}
              id="demo-simple-select-outlined-label"
            >
              Role
            </InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              labelWidth={labelWidthTypeRole}
              value={false}
            >
              <MenuItem value={false}>Report</MenuItem>
              <MenuItem value>Report Web hook</MenuItem>
            </Select>
          </FormControl>
        </div>

        <div style={{ margin: 5 }}>
          <TextField
            id="outlined-select-currency"
            select
            label="Select"
            helperText="Please select your currency"
            variant="outlined"
            fullWidth
            value={currency}
            onChange={handleChange}
          >
            <MenuItem value={false}>Report</MenuItem>
            <MenuItem value>Report Web hook</MenuItem>
          </TextField>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary" variant="contained">
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="App">
      <AddUserModal open={open} onClose={() => setOpen(false)} />
      <button onClick={() => setOpen(true)}>Open</button>
    </div>
  );
}

Answer 1

The error is resolved very simply: remove "current" in useEffect hook:

    React.useEffect(() => {
    setState({
      ...state,
      labelWidthTypeRole: inputLabelTypeRole.**current**.offsetWidth
    });
  }, []);

Because in the example that you used there are several components, but you have one component and "current" is superfluous.