validateDOMNesting (...): <button>не может отображаться как потомок <button>

Question

Я использую Material-UI в моем проекте, получаю предупреждение в консоли Warning: validateDOMNesting (...): не может отображаться как потомок , даже если нет прямых потомки,

           <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>

Вот ссылка на песочницу: https://codesandbox.io/s/react-material-ui-0yqeo

Answer 1

По умолчанию elementType для компонента Fab - кнопка . В вашем приложении компонент Fab уже вложен в компонент Button, поэтому возникает ошибка. Компонент Fab наследуется от ButtonBase, поэтому вы можете удалить компонент Button верхнего уровня и использовать onClick непосредственно для него:

<Fab
  color="secondary"
  aria-label="add"
  size="small"
  onClick={this.handleToggle}
>
  <AddIcon />
</Fab>