title: Programmatically set value in material-ui Autocomplete TextField
body: <p>In my React app I have an input which could take value from the dropdown list. For that putpose I use material-ui Autocomplete and TextField components.</p>
  
  <p><strong>Question:</strong> how can I programmaticaly set an input value by clicking on the button without choosing from the dropdown list? For example, I want to set "The Godfather" from the example and this value should be visually seen in the input.</p>
  
  <p><a href="https://codesandbox.io/s/autocomplete-material-ui-od6ot" rel="noreferrer">Codesandbox example here</a></p>
  
  <pre><code>import React from "react";
  import Autocomplete from "@material-ui/lab/Autocomplete";
  import { TextField, Button } from "@material-ui/core";
  
  export default function ComboBox() {
    const handleClick = () =&gt; {
      // set value in TextField from dropdown list
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;Autocomplete
          options={top100Films}
          getOptionLabel={option =&gt; option.title}
          style={{ width: 300 }}
          renderInput={params =&gt; (
            &lt;TextField
              {...params}
              label="Combo box"
              variant="outlined"
              fullWidth
            /&gt;
          )}
        /&gt;
        &lt;Button onClick={handleClick}&gt;Set value&lt;/Button&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
  const top100Films = [
    { title: "The Shawshank Redemption", year: 1994 },
    { title: "The Godfather", year: 1972 },
    { title: "The Godfather: Part II", year: 1974 },
    { title: "The Dark Knight", year: 2008 }
  ];
  </code></pre>