title: React + Material-UI: list should have a unique "key" prop
body: <p>I get following error / warning during rendering:</p>
  
  <pre><code>Warning: Each child in a list should have a unique "key" prop.
  
  Check the render method of `App`. See .. for more information.
      in ListItemCustom (at App.js:137)
      in App (created by WithStyles(App))
      in WithStyles(App) (at src/index.js:7)
  </code></pre>
  
  <p>What to do? Do I need to add a uniq key to my <code>ListItem</code> <code>material-ui</code> component?</p>
  
  <p>App.js:</p>
  
  <pre><code>import React, { Component } from "react";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  import Button from "@material-ui/core/Button";
  import FacebookLogin from "react-facebook-login";
  import Menu from "@material-ui/core/Menu";
  import MenuItem from "@material-ui/core/MenuItem";
  import List from "@material-ui/core/List";
  import ListItem from "@material-ui/core/ListItem";
  import ListItemText from "@material-ui/core/ListItemText";
  import ArrowForwardIos from "@material-ui/icons/ArrowForwardIos";
  import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
  import axios from "axios";
  import ListItemCustom from "./components/ListItemCustom";
  import ListSubheader from "@material-ui/core/ListSubheader";
  import Switch from "@material-ui/core/Switch";
  import TextField from "@material-ui/core/TextField";
  import Box from "@material-ui/core/Box";
  import IconButton from "@material-ui/core/IconButton";
  
  // import this
  import { withStyles } from "@material-ui/core/styles";
  
  // make this
  const styles = theme =&gt; ({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1
    },
    listSubHeaderRoot: {
      backgroundColor: "#E5E5E5",
      color: "#252525",
      lineHeight: "22px"
    }
  });
  
  class App extends Component {
    state = {
      accessToken: "",
      isLoggedIn: false,
      userID: "",
      name: "",
      email: "",
      picture: "",
      selectedEvent: undefined,
      buyOrRelease: "buy",
      pages: []
    };
  
    responseFacebook = response =&gt; {
      this.setState({
        accessToken: response.accessToken,
        isLoggedIn: true,
        userID: response.userID,
        name: response.name,
        email: response.email,
        picture: response.picture.data.url
      });
      let accessToken = response.accessToken;
      axios
        .get(
          "https://graph.facebook.com/v5.0/me/accounts?fields=id,name&amp;access_token=" +
            response.accessToken
        )
        .then(async pagesResponse =&gt; {
          let promisesArray = pagesResponse.data.data.map(async page =&gt; {
            console.log("page " + page.id + " " + page.name);
            return axios
              .get(
                "https://graph.facebook.com/v5.0/" +
                  page.id +
                  "/events?fields=id,name&amp;access_token=" +
                  accessToken
              )
              .catch(e =&gt; e);
          });
          const responses = await Promise.all(promisesArray);
          var pages = [];
          responses.forEach((response, i) =&gt; {
            const page = pagesResponse.data.data[i];
            pages.push({
              id: page.id,
              name: page.name,
              events: response.data.data
            });
          });
          this.setState({
            pages: pages
          });
        });
    };
  
    handleClick = event =&gt;
      this.setState({
        anchorEl: event.currentTarget
      });
    handleClose = () =&gt; {
      this.setState({ anchorEl: undefined });
    };
    handleCloseAndLogOut = () =&gt; {
      this.setState({ anchorEl: undefined });
      this.setState({ isLoggedIn: undefined });
      this.setState({ userID: undefined });
      this.setState({ name: undefined });
      this.setState({ email: undefined });
      this.setState({ picture: undefined });
    };
  
    switchToRelease = () =&gt; {
      this.setState({ buyOrRelease: "release" });
    };
  
    switchToBuy = () =&gt; {
      this.setState({ buyOrRelease: "buy" });
    };
  
    componentDidMount() {
      document.title = "Tiket.hu";
    }
  
    handleSort = event =&gt; {
      this.setState({ selectedEvent: event });
    };
  
    navigateBack = () =&gt; {
      this.setState({ selectedEvent: undefined });
    };
  
    render() {
      let fbOrMenuContent;
      let listContent;
      let buyOrReleaseMenuItem;
      if (this.state.isLoggedIn) {
        let eventsList;
        if (this.state.buyOrRelease === "buy") {
        } else {
          eventsList = this.state.pages.map(page =&gt; {
            let eventsList2 = page.events.map(event =&gt; (
              &lt;ListItemCustom key={event.id} value={event} onHeaderClick={this.handleSort} /&gt;
            ));
            return (
              &lt;div&gt;
                &lt;ListSubheader className={this.props.classes.listSubHeaderRoot} key={page.id}&gt;{page.name}&lt;/ListSubheader&gt;
                {eventsList2}
              &lt;/div&gt;
            );
          });
        }
        listContent = (
          &lt;div&gt;
            &lt;List component="nav" aria-label="main mailbox folders"&gt;
              {eventsList}
            &lt;/List&gt;
          &lt;/div&gt;
        );
        if (this.state.selectedEvent) {
          listContent = (
            &lt;div&gt;
              &lt;List component="nav" aria-label="main mailbox folders"&gt;
                &lt;ListItem button onClick={this.navigateBack}&gt;
                  &lt;IconButton edge="start" aria-label="delete"&gt;
                    &lt;ArrowBackIos /&gt;
                  &lt;/IconButton&gt;
  
                  &lt;Box textAlign="left" style={{ width: 150 }}&gt;
                    Back
                  &lt;/Box&gt;
                  &lt;ListItemText
                    secondaryTypographyProps={{ align: "center" }}
                    primary={this.state.selectedEvent.name}
                  /&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem button&gt;
                  &lt;Box textAlign="left" style={{ width: 150 }}&gt;
                    Select auditorium
                  &lt;/Box&gt;
                  &lt;ListItemText
                    secondaryTypographyProps={{ align: "right" }}
                    secondary="UP Újpesti Rendezvénytér"
                  /&gt;
                  &lt;IconButton edge="end" aria-label="delete"&gt;
                    &lt;ArrowForwardIos /&gt;
                  &lt;/IconButton&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem button&gt;
                  &lt;Box textAlign="left" style={{ width: 150 }}&gt;
                    Release purpose
                  &lt;/Box&gt;
                  &lt;ListItemText
                    secondaryTypographyProps={{ align: "right" }}
                    secondary="Normal selling"
                  /&gt;
                  &lt;IconButton edge="end" aria-label="delete"&gt;
                    &lt;ArrowForwardIos /&gt;
                  &lt;/IconButton&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem&gt;
                  &lt;ListItemText primary="Start selling" /&gt;
                  &lt;Switch edge="end" /&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem&gt;
                  &lt;ListItemText primary="Notify if different price would increase revenue" /&gt;
                  &lt;Switch edge="end" /&gt;
                &lt;/ListItem&gt;
  
                &lt;ListSubheader className={this.props.classes.listSubHeaderRoot}&gt;
                  Sector
                &lt;/ListSubheader&gt;
  
                &lt;ListItem button&gt;
                  &lt;Box textAlign="left" style={{ width: 150 }}&gt;
                    Select sector
                  &lt;/Box&gt;
                  &lt;ListItemText
                    secondaryTypographyProps={{ align: "right" }}
                    secondary="A"
                  /&gt;
                  &lt;IconButton edge="end" aria-label="delete"&gt;
                    &lt;ArrowForwardIos /&gt;
                  &lt;/IconButton&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem button&gt;
                  &lt;Box textAlign="left" style={{ width: 500 }}&gt;
                    Marketing resource configuration &amp; result
                  &lt;/Box&gt;
                  &lt;ListItemText
                    secondaryTypographyProps={{ align: "right" }}
                    secondary=""
                  /&gt;
                  &lt;IconButton edge="end" aria-label="delete"&gt;
                    &lt;ArrowForwardIos /&gt;
                  &lt;/IconButton&gt;
                &lt;/ListItem&gt;
  
                &lt;ListItem&gt;
                  &lt;ListItemText primary="Price in sector" /&gt;
                  &lt;TextField InputLabelProps={{ shrink: true }} /&gt;
                &lt;/ListItem&gt;
              &lt;/List&gt;
            &lt;/div&gt;
          );
        }
        if (this.state.buyOrRelease === "buy") {
          buyOrReleaseMenuItem = (
            &lt;Menu
              id="simple-menu"
  
              anchorEl={this.state.anchorEl}
              keepMounted
              open={Boolean(this.state.anchorEl)}
              onClose={this.handleClose}
            &gt;
              &lt;MenuItem onClick={this.handleCloseAndLogOut}&gt;Log out&lt;/MenuItem&gt;
              &lt;MenuItem onClick={this.switchToRelease}&gt;
                Switch Release mode
              &lt;/MenuItem&gt;
              &lt;MenuItem onClick={this.handleClose}&gt;My tickets&lt;/MenuItem&gt;
            &lt;/Menu&gt;
          );
        } else {
          buyOrReleaseMenuItem = (
            &lt;Menu
              id="simple-menu"
              anchorEl={this.state.anchorEl}
              keepMounted
              open={Boolean(this.state.anchorEl)}
              onClose={this.handleClose}
            &gt;
              &lt;MenuItem onClick={this.handleCloseAndLogOut}&gt;Log out&lt;/MenuItem&gt;
              &lt;MenuItem onClick={this.switchToBuy}&gt;Switch Buy mode&lt;/MenuItem&gt;
            &lt;/Menu&gt;
          );
        }
        fbOrMenuContent = (
          &lt;div&gt;
            &lt;Button
              aria-controls="simple-menu"
              aria-haspopup="true"
              onClick={this.handleClick}
            &gt;
              {this.state.name}
            &lt;/Button&gt;
            {buyOrReleaseMenuItem}
          &lt;/div&gt;
        );
      } else {
        let fbAppId;
        if (
          window.location.hostname === "localhost" ||
          window.location.hostname === "127.0.0.1"
        )
          fbAppId = "402670860613108";
        else fbAppId = "2526636684068727";
        fbOrMenuContent = (
          &lt;FacebookLogin
            appId={fbAppId}
            autoLoad={true}
            fields="name,email,picture"
            scope="public_profile,pages_show_list"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
          /&gt;
        );
      }
      return (
        &lt;div className="App"&gt;
          &lt;AppBar position="static"&gt;
            &lt;Toolbar&gt;
              &lt;Typography variant="h6" className={this.props.classes.title}&gt;
                Tiket.hu
              &lt;/Typography&gt;
              &lt;Button color="inherit"&gt;Search&lt;/Button&gt;
              &lt;Button color="inherit"&gt;Basket&lt;/Button&gt;
              {fbOrMenuContent}
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          {listContent}
        &lt;/div&gt;
      );
    }
  }
  
  export default withStyles(styles)(App);
  </code></pre>
  
  <p>ListItemCustom.js:</p>
  
  <pre><code>import React, { Component } from "react";
  import ListItem from "@material-ui/core/ListItem";
  import ListItemIcon from "@material-ui/core/ListItemIcon";
  import ListItemText from "@material-ui/core/ListItemText";
  import ArrowForwardIos from "@material-ui/icons/ArrowForwardIos";
  
  export default class ListItemCustom extends Component {
    eventSelected = () =&gt; {
      this.props.onHeaderClick(this.props.value);
    };
    render() {
      return (
        &lt;ListItem button key={this.props.value.id} onClick={this.eventSelected}&gt;
          &lt;ListItemText primary={this.props.value.name}/&gt;
          &lt;ListItemIcon&gt;
            &lt;ArrowForwardIos /&gt;
          &lt;/ListItemIcon&gt;
        &lt;/ListItem&gt;
      );
    }
  }
  
  </code></pre>