title: Handling Multiple Inputs with a Single onChange Handler in React
body: <p>I have a Controlled Component which manages multiple inputs (range and checkbox) with a single handleChange method. </p>
  
  <p>My range and checkbox are not responding to events. I have been using this <a href="https://www.pluralsight.com/guides/handling-multiple-inputs-with-single-onchange-handler-react" rel="nofollow noreferrer">article</a> as a reference. I cloned the example for the article that I have been following and it works, so i am stumped as to why my component is not.</p>
  
  <pre><code>import React, {useState} from 'react';
  
      export default function App() {
  
        const [state, setState] = useState({
          rightAngle:  11,
          leftAngle: 4.5,
          rightLength: 0.75,
          leftLength: 0.65,
          isChecked: true
        })
  
        function handleChange(evt) {
         const value =
             evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
         setState({
           ...state,
           [evt.target.name]: value
         });
        }
  
  
        return (
           &lt;Container&gt;
  
             &lt;Form&gt;
               &lt;FormItem className="form--angle"&gt;
                 &lt;FormLabel htmlFor="angleRight"&gt;Right Angle&lt;/FormLabel&gt;
  
                 &lt;input type="range" className="angleRight" name="angleRight"  min="3" max="15"
                        value={state.rightAngle} step="0.1" onChange = {handleChange}/&gt;
  
                 &lt;FormLabel htmlFor="angleLeft"&gt;Left Angle&lt;/FormLabel&gt;
  
                 &lt;input type="range" id="angleLeft" className="angleLeft" name="angleLeft" min="3" max="15"
                        value={state.leftAngle} step="0.1" onChange={handleChange}/&gt;
               &lt;/FormItem&gt;
  
               &lt;FormItem className="form--len"&gt;
                 &lt;FormLabel htmlFor="lengthRight"&gt;Right Length&lt;/FormLabel&gt;
  
                 &lt;input type="range" id="lengthRight" className="lengthRight" name="lengthRight" min="0.63"
                        max="0.75" value={state.rightLength} onChange={handleChange} step="0.01"/&gt;
  
                 &lt;FormLabel htmlFor="lengthLeft"&gt;Left Length&lt;/FormLabel&gt;
  
                 &lt;input type="range" id="lengthLeft" className="lengthLeft" name="lengthLeft" min="0.63"
                        max="0.75" value={state.leftLength} onChange={handleChange} step="0.01"/&gt;
               &lt;/FormItem&gt;
  
               &lt;FormItem className="form--leaves"&gt;
                 &lt;FormLabel htmlFor="leaves"&gt;Drawing leaves?&lt;/FormLabel&gt;
                 &lt;input type="checkbox" id="leaves" className="leaves" name="leaves" checked={state.isChecked} onChange={handleChange}/&gt;
               &lt;/FormItem&gt;
  
             &lt;/Form&gt;
  
           &lt;/Container&gt;
  
        );
      }
  </code></pre>