title: How to set multi value to autocomplete component in reactjs
body: <p>I need  to set multi selected value to autocomplete in reactjs. I'm using Material-UI components in my project.</p>
  <p><a href="https://i.stack.imgur.com/Nbu8d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nbu8d.png" alt="enter image description here" /></a></p>
  <p>F.e you can see above. First data is coming first user and second data is coming from another user. I want to fill in the value like that. Then, user can remove selected values or add new values.</p>
  <p>If you can do it with dummy data, I can use with data from database. All i need how to do this.</p>
  <pre><code>import React from 'react';
  import Chip from '@material-ui/core/Chip';
  import Autocomplete from '@material-ui/lab/Autocomplete';
  import { makeStyles } from '@material-ui/core/styles';
  import TextField from '@material-ui/core/TextField';
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      width: 500,
      '&amp; &gt; * + *': {
        marginTop: theme.spacing(3),
      },
    },
  }));
  
  
    export default function Multi({callbackFromMultiSelect,reference,favBooks}) {
    const classes = useStyles();
  
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Autocomplete
          multiple
          id=&quot;tags-standard&quot;
          options={favBooks}
          getOptionLabel={(option) =&gt; (option.name)}
          // onClick={()=&gt;alert('test')}
          onChange={(event, value) =&gt;callbackFromMultiSelect({value:value,reference:reference})}
          // defaultValue={[top100Films[1]]}
          renderInput={(params) =&gt; (
            &lt;TextField
              {...params}
              variant=&quot;standard&quot;
              label=&quot;favBooks&quot;
              placeholder=&quot;favBooks&quot;
            /&gt;
          )}
        /&gt;
       
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And my parent component</p>
  <pre><code>import React from 'react'
  import AutoCompleteTest from './AutoComplete'
  
  export const Test = () =&gt; {
    const callbackFromMultiSelect = (item) =&gt; {
      console.log(item)
    }
  
    const favBooks=[
      {name:&quot;LOTR&quot;,from:&quot;a&quot;,to:&quot;a&quot;},
      {name:&quot;GOT&quot;,from:&quot;b&quot;,to:&quot;b&quot;},
      {name:&quot;HP&quot;,from:&quot;c&quot;,to:&quot;c&quot;}
    ]
  
    return (
      &lt;div className={'mainStore'}&gt;
        Test
        &lt;AutoCompleteTest callbackFromMultiSelect={callbackFromMultiSelect} reference={'test'} favBooks={favBooks}/&gt;
        &lt;br /&gt;
        &lt;AutoCompleteTest callbackFromMultiSelect={callbackFromMultiSelect} reference={'test'} favBooks={favBooks}/&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>