title: ReactJs : Show or hide input fields based on select value
body: <p>I'm working on a form where some additional inputs will be shown based on the value of select.
  The value of select changes on selecting a different option, but the &quot;numberOfUsers&quot; text field does not become visible.</p>
  <p>I can see the changed value being printed on the console.
  Yes is printed on selecting first option and No on selecting the select.</p>
  <p>I don't understand why it doesn't work. Please let me know the mistakes I have done.</p>
  <p>Below is the code I have written</p>
  <pre><code>import React from 'react'
  import { useState } from 'react'
  import { Grid } from '@mui/material'
  import './Form.css'
  
  export const AddStartupForm = () =&gt; {
  
      const [fields, setFields] = useState({})
  
      function handleChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
          
          fields[name] = value
          setFields(fields)
          console.log(fields['revenueGenerated'])
      }
  
      
      return (
          &lt;Grid container sx={{py: 5}}&gt;
          &lt;Grid item xs={1} sm={4}&gt;&lt;/Grid&gt;
          &lt;Grid item xs={10} sm={4}&gt;
              &lt;form&gt;
                  &lt;label htmlFor=&quot;startupName&quot;&gt;Startup Name&lt;/label&gt;
                  &lt;input type=&quot;text&quot; 
                      name=&quot;startupName&quot;                     
                      onChange={handleChange}
                      value={fields[&quot;startupName&quot;]}
                  /&gt;
  
                  &lt;label htmlFor=&quot;countryName&quot;&gt;Country&lt;/label&gt;                
                  &lt;input type=&quot;text&quot; 
                      name=&quot;countryName&quot;                     
                      onChange={handleChange}
                      value={fields[&quot;countryName&quot;]}
                  /&gt;            
  
                  &lt;label htmlFor=&quot;revenueGenerated&quot;&gt;Do you make revenue?&lt;/label&gt;
                  &lt;select name=&quot;revenueGenerated&quot;
                      onChange={handleChange}
                      value={fields[&quot;revenueGenerated&quot;]}
                  &gt;
                      &lt;option disabled selected value=''&gt; -- select an option -- &lt;/option&gt;
                      &lt;option value=&quot;Yes&quot;&gt;Yes&lt;/option&gt;
                      &lt;option value=&quot;No&quot;&gt;No&lt;/option&gt;
                  &lt;/select&gt;
  
                  { fields['revenueGenerated'] === 'Yes' ?
                     &lt;&gt;
                         &lt;label htmlFor=&quot;numberOfUsers&quot;&gt;Sample Yes&lt;/label&gt;
                         &lt;input type=&quot;text&quot;
                             name=&quot;numberOfUsers&quot;
                         /&gt;
                     &lt;/&gt;
                     : null
                 } 
                  
              &lt;/form&gt;            
          &lt;/Grid&gt;
          &lt;/Grid&gt;
      )
  }
  
  
  </code></pre>