handler change Select input object in react js

Question

I mapped option select data from the Api but i have problem to change value of select input i use this handler change but the input can't change value is always fix what is the error in my code? how can i change the input value My error is like this is look please in the link video

https://github.com/JedWatson/react-select/issues/796

All the code in the same component

initialValues


const initialStates = {
         rug: {nom: "", id: "" }
    }


    const [currentStates, setCurrentStates] = useState(initialStates);

handle change methode



    const handleChange = event =>{
        setCurrentStates({ ...rugList[event.target.value].drug.id });
    };

Select input



  <Form.Group as={Col} controlId="formGridDrug">
                                                        
<Form.Label> Select</Form.Label>
                                                       
 <Form.Control required as="select"
                                                          
  type="text"
                                                           
 id="rug.id"
                                                           
 name="rug.id"
                                                           
 value={currentStates.rug.id}
                                                           
 className={"bg-white text-dark"}
                                                           
 onChange={handleChange}
                                                      
  >
                                                         
   <option value="">Choice select</option>
                                                           
 {rugList.map((value) =>
                                                               
 <option value={value.id} key={value.id}>
                                                                  
  {value.nom}
                                                               
 </option>
                                                            
)}

                                                       
 </Form.Control>

                                                   
 </Form.Group>

where is initialStates initialized - is it outside this component? — Samuel Goldenbaum
– Samuel Goldenbaum, Commented Apr 6, 2021 at 22:50
No it is inside the component the error is in the handel change can’t work my error is like this issue look please in this link video github.com/JedWatson/react-select/issues/796 — Lili lillas
– Lili lillas, Commented Apr 6, 2021 at 23:11
you are linking an issue from react-select repo but it doesn't seem that you are using this library — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Apr 6, 2021 at 23:20
No I don’t use it , but show you the video it is like my error ;( — Lili lillas
– Lili lillas, Commented Apr 6, 2021 at 23:23

Rafael Buzatto de Campos · Accepted Answer · 2021-04-06 23:40:03Z

1

rugList is an array with objects with shape {id , nom }. your handleChange needs to find a an object at rugList with an id property that matches event.target.value to set currentStates correctly:

  const handleChange = event => {
      const rug = rugList.find(({ id }) => id === event.target.value);
      if(rug) setCurrentStates({ rug });
  };

answered Apr 6, 2021 at 23:40

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

handler change Select input object in react js

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