title: Using props data for a select field
body: <p>I'm fetching data in <code>index.tsx</code> which I later on pass to <code>FormOne</code> just as following and I'm then able to use the data in FormOne using <code>props.data</code></p>
  <pre><code>const [data, setData] = useState([]);
  
  ...
  
  return (
      ...
      &lt;FormOne data={data} /&gt;
  );
  </code></pre>
  <p>I want to replace &quot;Pick a user&quot; in <code>FormOne</code> with a list of the users from <code>props.data</code>. The idea is to select a user a query e.g. &quot;What address does he have?&quot;, which leads to user's email address being printed right below the form, not sure how to do that either. How can I achieve that?</p>
  <pre><code>import {
    Box,
    Button,
    FormControl,
    Grid,
    InputLabel,
    MenuItem,
    Select,
    SelectChangeEvent,
    TextField,
    Typography,
  } from '@mui/material';
  import { useState } from 'react';
  
  const FormOne = (props: any) =&gt; {
    const [user, setUser] = useState('');
    const [query, setQuery] = useState('');
  
    const handleChange = (event: SelectChangeEvent) =&gt; {
      setUser(event.target.value);
      setQuery(event.target.value);
    };
  
    return (
      &lt;Box component=&quot;form&quot; noValidate autoComplete=&quot;off&quot;&gt;
        &lt;Typography component=&quot;h1&quot; variant=&quot;h4&quot; align=&quot;center&quot;&gt;
          GUI #1
        &lt;/Typography&gt;
  
        &lt;Grid container spacing={2}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;FormControl variant=&quot;outlined&quot; fullWidth&gt;
              &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Pick a user&lt;/InputLabel&gt;
              &lt;Select
                labelId=&quot;demo-simple-select-label&quot;
                id=&quot;demo-simple-select&quot;
                value={user}
                onChange={handleChange}
              &gt;
                &lt;MenuItem value={10}&gt;User 1&lt;/MenuItem&gt;
                &lt;MenuItem value={20}&gt;User 2&lt;/MenuItem&gt;
                &lt;MenuItem value={30}&gt;User 3&lt;/MenuItem&gt;
              &lt;/Select&gt;
            &lt;/FormControl&gt;
          &lt;/Grid&gt;
  
          &lt;Grid item xs={12}&gt;
            &lt;FormControl variant=&quot;outlined&quot; fullWidth&gt;
              &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Query&lt;/InputLabel&gt;
              &lt;Select
                labelId=&quot;demo-simple-select-label&quot;
                id=&quot;demo-simple-select&quot;
                value={query}
                onChange={handleChange}
              &gt;
                &lt;MenuItem value={10}&gt;What email does he use?&lt;/MenuItem&gt;
                &lt;MenuItem value={20}&gt;What address does he have?&lt;/MenuItem&gt;
              &lt;/Select&gt;
            &lt;/FormControl&gt;
          &lt;/Grid&gt;
  
          &lt;Grid item xs={12}&gt;
            &lt;Button variant=&quot;contained&quot;&gt;Submit&lt;/Button&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Box&gt;
    );
  };
  
  export default FormOne;
  
  </code></pre>
  <h2><a href="https://codesandbox.io/s/heuristic-roentgen-6915nx" rel="nofollow noreferrer">CodeSandbox</a></h2>