Handling Multiple Inputs with a Single onChange Handler in React

Question

I have a Controlled Component which manages multiple inputs (range and checkbox) with a single handleChange method.

My range and checkbox are not responding to events. I have been using this article 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.

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 (
         <Container>

           <Form>
             <FormItem className="form--angle">
               <FormLabel htmlFor="angleRight">Right Angle</FormLabel>

               <input type="range" className="angleRight" name="angleRight"  min="3" max="15"
                      value={state.rightAngle} step="0.1" onChange = {handleChange}/>

               <FormLabel htmlFor="angleLeft">Left Angle</FormLabel>

               <input type="range" id="angleLeft" className="angleLeft" name="angleLeft" min="3" max="15"
                      value={state.leftAngle} step="0.1" onChange={handleChange}/>
             </FormItem>

             <FormItem className="form--len">
               <FormLabel htmlFor="lengthRight">Right Length</FormLabel>

               <input type="range" id="lengthRight" className="lengthRight" name="lengthRight" min="0.63"
                      max="0.75" value={state.rightLength} onChange={handleChange} step="0.01"/>

               <FormLabel htmlFor="lengthLeft">Left Length</FormLabel>

               <input type="range" id="lengthLeft" className="lengthLeft" name="lengthLeft" min="0.63"
                      max="0.75" value={state.leftLength} onChange={handleChange} step="0.01"/>
             </FormItem>

             <FormItem className="form--leaves">
               <FormLabel htmlFor="leaves">Drawing leaves?</FormLabel>
               <input type="checkbox" id="leaves" className="leaves" name="leaves" checked={state.isChecked} onChange={handleChange}/>
             </FormItem>

           </Form>

         </Container>

      );
    }

Guru Hadadi · Accepted Answer · 2020-05-24 01:56:56Z

Your state property name should be in sync the input name and value. Your state properties are NOT matching with the input name and hence the issue.

Eg: you have defined rightAngle in the state and have given the input name as angleRight. Also for the checkbox, name in the state is isChecked but in the input the name is `leaves.

Make corrections like below

state

  const [state, setState] = useState({
        angleRight:  11,
        angleLeft: 4.5,
        lengthRight: 0.75,
        lengthLeft: 0.65,
        leaves: true
  })

JSX

<Container>

           <Form>
             <FormItem className="form--angle">
               <FormLabel htmlFor="angleRight">Right Angle</FormLabel>

               <input type="range" className="angleRight" name="angleRight"  min="3" max="15"
                      value={state.angleRight} step="0.1" onChange = {handleChange}/>

               <FormLabel htmlFor="angleLeft">Left Angle</FormLabel>

               <input type="range" id="angleLeft" className="angleLeft" name="angleLeft" min="3" max="15"
                      value={state.angleLeft} step="0.1" onChange={handleChange}/>
             </FormItem>

             <FormItem className="form--len">
               <FormLabel htmlFor="lengthRight">Right Length</FormLabel>

               <input type="range" id="lengthRight" className="lengthRight" name="lengthRight" min="0.63"
                      max="0.75" value={state.lengthRight} onChange={handleChange} step="0.01"/>

               <FormLabel htmlFor="lengthLeft">Left Length</FormLabel>

               <input type="range" id="lengthLeft" className="lengthLeft" name="lengthLeft" min="0.63"
                      max="0.75" value={state.lengthLeft} onChange={handleChange} step="0.01"/>
             </FormItem>

             <FormItem className="form--leaves">
               <FormLabel htmlFor="leaves">Drawing leaves?</FormLabel>
               <input type="checkbox" id="leaves" className="leaves" name="leaves" checked={state.leaves} onChange={handleChange}/>
             </FormItem>

           </Form>

         </Container>

Collectives™ on Stack Overflow

Handling Multiple Inputs with a Single onChange Handler in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related