title: Show textfields based on form selection React
body: <p>I have a drop downmenu component(material ui) and want to render different Textfields in another file based on the selection that was made in this dropdown menu.  In other words if value is residential then show the textfields from the residential component</p>
  <pre><code>const selections = [
    {
      value: 'Residential',
      label: 'Residential',
    },
    {
      value: 'Commercial',
      label: 'Commercial',
    },
    {
      value: 'Hybrid',
      label: 'Hybrid',
    },
    {
      value: 'Corporate',
      label: 'Corporate',
    },
  ];
  
  export default function Selection() {
      const [selection, setSelection] = React.useState('');
  
      const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
          setSelection(event.target.value);
      };
  
      return (
      &lt;Box
        component=&quot;form&quot;
        sx={{
          '&amp; .MuiTextField-root': { m: 1, width: '25ch' },
        }}
        noValidate
        autoComplete=&quot;off&quot;
      &gt;
        &lt;div&gt;
          &lt;TextField
            id=&quot;outlined-select-currency&quot;
            select
            label=&quot;Select&quot;
            value={selection}
            onChange={handleChange}
            helperText=&quot;Please select your building type&quot;
         &gt;
            {selections.map((option) =&gt; (
              &lt;MenuItem key={option.value} value={option.value}&gt;
                {option.label}
              &lt;/MenuItem&gt;
            ))}
          &lt;/TextField&gt;
        &lt;/div&gt;
      &lt;/Box&gt;
     );
   }
  </code></pre>