CODEWITHSUNDEEP
reactjsformsreact-hooks
Kuldeep Singh
Kuldeep Singh

Reputation: 79

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

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;

Upvotes: 0

Views: 900

Answers (1)

HittuDesai
HittuDesai

Reputation: 361

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
    });
};

Upvotes: 1

Related Questions