title: Component not being rendered in switch statement in onChange Listener
body: <p>I am new to react. I have a class called <strong>GroupSelectt</strong>. In this class I have a switch statement in the onChange listener for a Select dropdown menu. When a selection is made I want a different form to render for each dropdown selection., i.e conditional rendering using a switch statement. ADCform and NVMform are currently identical in code.My issue is that the forms do not render on screen. I'm unsure if this is the correct way to do it or if there is a more efficient way.Below are my code files. Thanks</p>
  <p><strong>GroupedSelectt.js</strong></p>
  <pre><code>import { borderBottom } from '@mui/system';
  import React, { Component } from 'react';
  import InputLabel from '@mui/material/InputLabel';
  import MenuItem from '@mui/material/MenuItem';
  import ListSubheader from '@mui/material/ListSubheader';
  import FormControl from '@mui/material/FormControl';
  import Select from '@mui/material/Select';
  import { ADCform } from './ADCform';
  import { NVMform } from './NVMform';
  /* eslint-disable */
  
  const options = [&quot;peter&quot;, &quot;bob&quot;, &quot;bill&quot;]
  
  
  export class GroupedSelectt extends React.Component {
    state = {
      value: &quot;peter&quot;,
    };
  
  
  
    onChange = e =&gt; {
  
      this.setState({ value: e.target.value });
      var vap = e.target.value
      console.log(vap)
      switch (vap) {
        case 'peter':
  
          break;
        case 'bob':
          &lt;NVMform/&gt;
          break;
        case 'bill':
  
        &lt;ADCform/&gt;
          break;
        default:
          return 'foo';
      }
  
    }
  
    render() {
      const { value } = this.state;
  
  
      return (
  
        &lt;div&gt;
          &lt;FormControl sx={{ m: 1, minWidth: 1200 }}&gt;
  
            &lt;InputLabel htmlFor=&quot;grouped-select&quot;&gt;Category&lt;/InputLabel&gt;
  
            &lt;Select id=&quot;options&quot; value={value} onChange={this.onChange}&gt;
  
              &lt;ListSubheader &gt;Name Options&lt;/ListSubheader&gt;
  
              {options.map((val, index) =&gt; &lt;MenuItem key={index} value={val}&gt; {val} &lt;/MenuItem&gt;)}
  
            &lt;/Select&gt;
  
          &lt;/FormControl&gt;
  
  
        &lt;/div&gt;
  
  
  
      )
    }
  }
  
  
  </code></pre>
  <p><strong>ADCform.js</strong></p>
  <pre><code>
  import React from 'react';
  import 'bootstrap/dist/css/bootstrap.css'
  import './CSS/Home.css';
  import {  Form, Col, Row, Button} from 'react-bootstrap';
  
  
  
  export class ADCform extends React.Component{
  render(){
      return (
      &lt;div&gt;
      
          &lt;Form&gt;
  
    
      &lt;Row className=&quot;mb-3&quot;&gt;
      &lt;Form.Group as={Col}&gt;
        &lt;Form.Label&gt;Fruit&lt;/Form.Label&gt;
        &lt;Form.Control type=&quot;ms&quot; placeholder=&quot;Enter Fruit&quot; /&gt;
        &lt;br&gt;&lt;/br&gt;
      &lt;/Form.Group&gt;
  
      
      &lt;Form.Label htmlFor=&quot;inputPassword5&quot;&gt;Enter Drink&lt;/Form.Label&gt;
    &lt;Form.Control
      type=&quot;percentage&quot;
      id=&quot;inputPassword6&quot;
      aria-describedby=&quot;Test&quot;
    /&gt;
    &lt;/Row&gt;
  
      &lt;/Form&gt;
    &lt;/div&gt;
      );
      }
  }
  </code></pre>
  <p><strong>Home.js</strong></p>
  <pre><code>import React from 'react';
  import 'bootstrap/dist/css/bootstrap.css'
  import './CSS/Home.css';
  import { Card, Form, } from 'react-bootstrap';
  
  
  
  import { GroupedSelectt } from './GroupedSelectt';
  import { ADCform } from './ADCform';
  
  
  
  
  export class Home extends React.Component {
    render() {
  
      return (
  
        &lt;div&gt;
  
          &lt;Card className='cardSize'&gt;
  
            &lt;Form className='formWidth'&gt;
              &lt;Form.Label className='label'&gt;Category&lt;/Form.Label&gt;
              &lt;GroupedSelectt /&gt;
  
            &lt;/Form&gt;
  
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>