The prop `children` is marked as required in `Button`, but its value is `undefined`

Question

I am trying to convert an older Material UI implementation. The Docs are bit laggy.

I get this error. The docs say

Name Type Default Description

children * node The content of the button.

What does this mean and what do I have to put in my code?

<Button
  variant="raised"
  color="primary"
  className={classes.Button}
  label={this.state.buttonLabel}
  onClick={this.handleClick}
>
</Button>

Answer 1

"children" are what is between the tags:

<Button>we are the children</Button>

Because you don't pass anything - it's undefined. To fix error just add something that React can render, like string:

<Button
  variant="raised"
  color="primary"
  className={classes.Button}
  label={this.state.buttonLabel}
  onClick={this.handleClick}
>
  My Button
</Button>;

Answer 2

Looks like they removed the label property and moved it to the children prop.

So you have to put it between the tags e.g.

<Button> here comes the label </Button>

You can always check the demos for the Components. See here