I am using snackbar in Material-UI, and I encountered Error: Material-UI: capitalize(string) expects a string argument.

My code

    this.state = {
      snackBarOpenVertical: "bottom",
      snackBarOpenHorizontal: "right",
    };

            <Snackbar
              // Neither of the 2 following approaches works.
              anchorOrigin={"bottom", "right"}
              anchorOrigin={this.state.snackBarOpenVertical, this.state.snackBarOpenHorizontal}

              open={true}
              onClose={this.handleSnackBarClose}
              message="I love snacks"
            />

I think the problem is in the anchorOrigin field, because it worked when I mented that 2 lines out though I couldn't specify the location of the snackbar that way.

And as I mented above, neither of the 2 approaches works.

Snackbar document: /

Could anyone point out where I did wrong?

Thanks in advance!

I am using snackbar in Material-UI, and I encountered Error: Material-UI: capitalize(string) expects a string argument.

My code

    this.state = {
      snackBarOpenVertical: "bottom",
      snackBarOpenHorizontal: "right",
    };

            <Snackbar
              // Neither of the 2 following approaches works.
              anchorOrigin={"bottom", "right"}
              anchorOrigin={this.state.snackBarOpenVertical, this.state.snackBarOpenHorizontal}

              open={true}
              onClose={this.handleSnackBarClose}
              message="I love snacks"
            />

I think the problem is in the anchorOrigin field, because it worked when I mented that 2 lines out though I couldn't specify the location of the snackbar that way.

And as I mented above, neither of the 2 approaches works.

Snackbar document: https://material-ui./ponents/snackbars/

Could anyone point out where I did wrong?

Thanks in advance!

• javascript
• reactjs
• material-ui

• I think you have added like this anchorOrigin={{"bottom", "right"}} – Jay Parmar Commented Jul 18, 2020 at 17:20

1 Answer 1

From the docs, anchorOrigin takes an object like this:

anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'left',
}}

You are omitting the inner {} and vertical and horizontal property names in your implementations