[ListItem] Warning in Chrome because of rootRef prop

• I have searched the issues of this repository and believe that this is not a duplicate.

When I use ListItem with rootRef I get a Warning-Message in console in Chrome:

Warning: React does not recognize the rootRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase rootref instead. If you accidentally passed it from a parent component, remove it from the DOM element.

(i need rootRef because i want to show a popover on the listItem, and the listItem should be the anchorElement)

“material-ui”: “1.0.0-beta.23” “react”: “16.2.0”

Chrome: Version 62.0.3202.94

[oliviertassinari]

@perevezencev You might want to use the RootRef component:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import List from "@material-ui/core/List";
import RootRef from "@material-ui/core/RootRef";
import ListItem from "@material-ui/core/ListItem";

class App extends Component {
  componentDidMount = () => {
    console.log(this.listItemRef);
  };

  listItemRef = React.createRef();

  render = () => (
    <div className="App">
      <List>
        <RootRef rootRef={this.listItemRef}>
          <ListItem>item-1</ListItem>
        </RootRef>
        <ListItem>item-2</ListItem>
      </List>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/wqvx1qr2v8

[perevezencev]

@oliviertassinari thank you, its work for me