18

I'm using Material-UI in my project, I'm getting a warning in the console:

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

even though there are no direct descendants,

<form>
  <TextField
    label="Title"
    value={title}
    onChange={this.handleChange("title")}
    className={classes.formControl}
    margin="normal"
  />
  <br />
  <FormControl className={classes.formControl}>
    <InputLabel>Muscles</InputLabel>
    <Select
      value={muscles}
      onChange={this.handleChange("muscles")}
    >
      {categories.map((category, index) => {
        return (
          <MenuItem key="index" value={category}>
            {category}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>
  <br />
  <TextField
    multiline
    rows={4}
    label="Description"
    value={description}
    onChange={this.handleChange("description")}
    className={classes.formControl}
    margin="normal"
  />
</form>

Here's the Sandbox link:

https://codesandbox.io/s/react-material-ui-0yqeo

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
Nag
  • 806
  • 1
  • 13
  • 28
  • Does this answer your question? [validateDOMNesting warning React](https://stackoverflow.com/questions/47282998/validatedomnesting-warning-react) – Jay Apr 21 '20 at 11:17

2 Answers2

12

The default elementType for the Fab component is button. In your App the Fab component is already nested in a Button component hence the error. The Fab component inherits from ButtonBase so you should be able to remove the top level Button component and use onClick directly on it:

<Fab
  color="secondary"
  aria-label="add"
  size="small"
  onClick={this.handleToggle}
>
  <AddIcon />
</Fab>
Samuel Vaillant
  • 3,667
  • 1
  • 14
  • 21
0

If the button is having one more button as a child then we recive this error, if the parent component is having button property remove the child button

vinay kumar
  • 71
  • 2
  • 7