title: Passing React values from child to parent
body: <p>I am struggling to work out something that is likely very simply. My parent component is a Search widget, which needs to use Filters defined in a separate Drawer component. Currently the user can type in a search query, which calls an API, and it needs to filter the results based on selectors form the drawer component. However, I cannot link the parent and child to make this happen!!</p>
  <p>The parent component (which includes the '' component within):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>function SuburbSearch(props: Props) {
      const classes = useStyles();
      const [value, setValue] = React.useState&lt;App.Suburb | null&gt;(null);
      const [inputValue, setInputValue] = React.useState('');
      ...
      
      return (
      &lt;Autocomplete
        id="search"
        getOptionLabel={(option) =&gt; (typeof option === 'string' ? option : option.name + ' ' + option.state)}
        filterOptions={(x) =&gt; x}
        options={options}
        ...
        ...
        renderInput={(params) =&gt; (
          &lt;TextField
            {...params}
            label="Search for a suburb"
            ...,
              startAdornment: (
                &lt;InputAdornment position="start"&gt;
                  &lt;Filters&gt;&lt;/Filters&gt;
                &lt;/InputAdornment&gt;
              ),
              endAdornment: (
                &lt;React.Fragment&gt;
                  {loading ? &lt;CircularProgress color="inherit" size={20} /&gt; : null}
                  {params.InputProps.endAdornment}
                &lt;/React.Fragment&gt;
              ),
            }}
            fullWidth
          /&gt;
        )}</code></pre>
  </div>
  </div>
  </p>
  <p>The child component (this is the 'Filter'):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export default function Filters() {
    const classes = useStyles();
    const [state, setState] = useState(false);
    const [dollar, setDollars] = useState&lt;number[]&gt;([0, 20000000]);
    const [type, setType] = React.useState&lt;string | null&gt;('all');
    
    ...
    const list = (anchor: Anchor) =&gt; (
      &lt;div className={classes.root} 
        role="presentation" /*onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}/*/&gt;
        &lt;Grid className={classes.main} container spacing={2}&gt;
          &lt;Grid className={classes.row} item xs={1} md={2} /&gt;
          &lt;Grid className={classes.row} item xs={10} md={8}&gt;
            &lt;Typography className={classes.header} align='center' gutterBottom&gt;
              Property Type
            &lt;/Typography&gt;
            &lt;ToggleButtonGroup value={type} onChange={handleTypeChange} exclusive&gt;
              &lt;ToggleButton value="all" &gt;All&lt;/ToggleButton&gt;
              &lt;ToggleButton value="some" &gt;Some&lt;/ToggleButton&gt;
            &lt;/ToggleButtonGroup&gt;
          &lt;/Grid&gt;
          ...
        &lt;/Grid&gt;
     &lt;/div&gt;
  }</code></pre>
  </div>
  </div>
  </p>