how to handle multiple form input with dynamic dropdown render in react Js

Question

I have created a form with multiple input there two dropdown first has option and second one's option changes dynamically based on selection of first dropdown. also i am storing all values in state with submit event.

Okay problem is i am either able to to get values and in state on submit event or either able to dynamically change the option for second dropdown.

But when I am trying to do both or trying to run two function on same onChange event its not trigging is any one can help me out why its not getting trigger and what is the issue. link : if any one want to see code it dummy code https://codesandbox.io/s/clever-mendel-ozt8tu?file=/src/App.js:0-1748

App.js

import "./styles.css";
import { useState } from "react";

function App() {
  const data = {
    first: ["car", "bus"],
    second: ["bike", "train"],
    third: ["plane", "rocket"]
};

const [option, setOption] = useState([]);

const getInput = (e) => {
   let input = e.target.value;
   setOption(data[input]);
};

const [values, setValues] = useState({
   name: "",
   city: "",
   category: "",
   ride: ""
 });

const inputHandle = (e) => {
  const { name, value } = e.target;
     setValues({
        ...values,
        [name]: value
     });
 };

 const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
 };

 return (
    <>
      <form onSubmit={handleSubmit}>
       <input
         type="text"
         placeholder="name"
         name="name"
         value={values.name}
         onChange={inputHandle}
        />
     <input
      type="text"
      placeholder="city"
      name="city"
      value={values.city}
      onChange={inputHandle}
    />
    <br />

    <select
      name="category"
      values={values.category}
      onChange={(e) => {
        getInput();
        inputHandle();
      }}
    >
      <option defaultValue="category">category</option>
      <option value="first">first</option>
      <option value="second">Second</option>
      <option value="third">Third</option>
    </select>

    <select name="ride" value={values.ride} onChange={inputHandle}>
      {option.map((ele) => (
        <option value={ele}>{ele}</option>
      ))}
    </select>
    <br />
    <button type="submit">Submit</button>
  </form>
   </>
 ); 
}

export default App;

HittuDesai · Accepted Answer · 2022-08-04 06:25:28Z

1

For the handler of the onChange in the first select, you are taking in the event object e as parameter but not passing it forward in getInput() or inputHandle(). Therefore, you should write something like this:

onChange={(e) => {
    getInput(e);
    inputHandle(e);
}}

This should do the job. Also, try to use only one function in the handler, like the one you have used for submitting the form.

If you want to combine everything into one handler, you can use the following handler:

const categoryHandler = (event) => {
    const selectName = event.target.name;
    const selectValue = event.target.value;
    setOption(data[selectValue]);
    setValues({
      ...values,
      selectName: selectValue
    });
};

edited Aug 4, 2022 at 6:25

answered Aug 3, 2022 at 12:34

HittuDesai

3612 silver badges7 bronze badges

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

3 Comments

Kuldeep Singh Over a year ago

hey thanks for the comment I have tried to add e but still that's not working using two function is required because one function handling dynamical dropdown adding and second one getting form data on submit that's why but i don't know how to work with this

HittuDesai Over a year ago

It works in the sandbox link you provided.

HittuDesai Over a year ago

I added some code for how you might be able to do something inside one handler

Collectives™ on Stack Overflow

how to handle multiple form input with dynamic dropdown render in react Js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related