title: How render a list of options with renderOption in material UI
body: <p>I want to change the background colour of the options inside an <code>Autocomplete</code> component, and the closest I can get is by using the <code>renderOption</code> prop.</p>
  <p>The problem is that I can't figure out how to iterate (using <code>map()</code>) the options that I have in my state.</p>
  <p>What I would like to do is something like</p>
  <pre><code>{state.myOptions.map( option =&gt; {
      // here I would like to call renderOption = .....
  }
  </code></pre>
  <p>Inside the <code>&lt;Autocomplete/&gt;</code> component</p>
  <p>Is it possible to implement something like this or is there a well defined manner to do it?</p>
  <p>EDIT</p>
  <p>This is the component</p>
  <pre><code>import React, { useEffect } from 'react'
  import { useForm, Form } from './hooks/useForm'
  import EventIcon from '@material-ui/icons/Event';
  import { makeStyles, TextField, Typography } from '@material-ui/core'
  import CustomTextField from './inputs/CustomTextField';
  import { Autocomplete } from '@material-ui/lab';
  import { connect } from 'react-redux'
  
  
  
  
      const EventForm = (props) =&gt; {
      
          // Redux 
          const { family } = props
      
          // React 
          const initialState = {
              email: &quot;&quot;,
              password: &quot;&quot;,
              errors: {
                  email: &quot;&quot;,
                  password: &quot;&quot;
              },
              familyMembers: [&quot;rgeg&quot;]
          }
      
          const { state, handleOnChange, setState } = useForm(initialState)
      
          
      
          useEffect(() =&gt; {
              family &amp;&amp; state.familyMembers !== family.members &amp;&amp; setState({
                  ...state,
                  familyMembers: family.members
              })
          })
      
          // Material UI
          const useStyles = makeStyles(theme =&gt; (
              {
                  message: {
                      marginTop: theme.spacing(3)
                  },
                  icon: {
                      backgroundColor: &quot;lightgrey&quot;,
                      padding: &quot;10px&quot;,
                      borderRadius: &quot;50px&quot;,
                      border: &quot;2px solid #3F51B5&quot;,
                      marginBottom: theme.spacing(1)
      
                  },
                  typography: {
                      marginBottom: theme.spacing(1),
                      marginTop: theme.spacing(4)
                  },
                  customTextField: {
                      marginTop: theme.spacing(0)
                  },
                  dateTimeWrapper: {
                      marginTop: theme.spacing(4)
                  }
              }
          ))
      
          const classes = useStyles()
      
          return (
              &lt;&gt;
                  &lt;div&gt;WORK IN PROGRESS...&lt;/div&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;EventIcon className={classes.icon} /&gt;
                  &lt;Form
                      title=&quot;Add new event&quot;
                  &gt;
                      &lt;Typography
                          variant=&quot;subtitle1&quot;
                          className={classes.typography}
                          align=&quot;left&quot;&gt;
                          Enter a title for this event
                          &lt;/Typography&gt;
                      &lt;CustomTextField
                          className={classes.customTextField}
                          label=&quot;Title&quot;
                      /&gt;
                      &lt;Typography
                          variant=&quot;subtitle1&quot;
                          className={classes.typography}
                          align=&quot;left&quot;&gt;
                          Enter a location for this event
                          &lt;/Typography&gt;
                      &lt;CustomTextField
                          className={classes.customTextField}
      
                          label=&quot;Location&quot;
                      /&gt;
                      &lt;Typography
                          variant=&quot;subtitle1&quot;
                          className={classes.typography}
                          align=&quot;left&quot;&gt;
                          Which member/s of the family is/are attending
                          &lt;/Typography&gt;
                      &lt;Autocomplete
                          multiple
                          id=&quot;tags-outlined&quot;
                          options={state.familyMembers}
                          getOptionLabel={(option) =&gt; option.name}
                          // defaultValue={[familyMembers[0]]}
                          filterSelectedOptions
                          renderInput={(params) =&gt; (
                              &lt;TextField
                                  {...params}
                                  variant=&quot;outlined&quot;
                                  label=&quot;Members Attending&quot;
                                  placeholder=&quot;Family Member&quot;
                              /&gt;
                          )}
                      /&gt;
                  &lt;/Form&gt;
              &lt;/&gt;
          );
      }
      
      // Redux
      const mapStateToProps = (state) =&gt; {
          return {
              family: state.auth.family
          }
      }
      
      export default connect(mapStateToProps)(EventForm);
  </code></pre>