How to create multiple input fields on click

Question

I have a drop-down where I have several option, what I want to do is which ever option is selected I want to create that much of input fields

On change of select I am doing this

    const Select_change = (e) => {
    let val = parseInt(e.target.value);
    console.log(val);
    switch (val) {
        case 2:
            setinputHolder((inputHolder) => [...inputHolder, 2]);

        case 3:
            setinputHolder((inputHolder) => [...inputHolder, 3]);

        case 4:
            setinputHolder((inputHolder) => [...inputHolder, 4]);
            console.log(inputHolder);
        default:
            setinputHolder((inputHolder) => [...inputHolder, val]);
    }
};

                    <select
                         onChange={Select_change}
                            name="Select_op"
                            className="form-control"
                            ref={register({ required: 'Please select IOT hub' })}>
                            <option value={1}>1</option>
                            <option value={2}>2</option>
                            <option value={3}>3</option>
                            <option value={4}>4</option>
                        </select>

I have created one state initial which is set to be 1 as I want to show one input field,after this what I am doing is

    const [inputHolder, setinputHolder] = useState([1]);

I am looping the input field on this basis

{inputHolder.map((li, index) => (
                    <div className="col-12 col-sm-12 col-md-8 col-lg-4 col-xl-4">
                        <div className="form-group input_form_label">
                            <input
                                type="text"
                                name="device_name"
                                id="device_name"
                                className="form-control"
                                placeholder="Device Name"
                                
                            />
                            <label className="common_label_form" htmlFor="device_name">
                                Device Name
                            </label>

                            
                        </div>
                    </div>
                ))}

But it is not working as expected, what If I have unknown nos in my drop-down let say 100, so I can not use switch to 100, I want a dynamic solution which will work fine.

Here is my working code sandbox for better understanding

So if you first click 2 and then 3 then there should be 5 input fields right? — maya_nk99
– maya_nk99, Commented Oct 5, 2020 at 13:49
Every time you change the dropdown, that concatenates a number into the inputHolder array. When you map the array, the number of times the dropdown changed + 1 will be the number of inputs rendered. Instead, use a single number in inputHolder instead of an array, and just change that number. Then use that number to generate an array of that length with new Array(inputHolder) and map that, — George
– George, Commented Oct 5, 2020 at 14:00

Avani Bataviya · Accepted Answer · 2020-10-05 14:05:42Z

Do below changes in your code

const Select_change = (e) => {
    let val = parseInt(e.target.value);
    setinputHolder(val);
  };

and while making input based on selected value

{[...Array(inputHolder).keys()].map(...)

so your logic will look like below code

<div className="row">
          {[...Array(inputHolder).keys()].map((li, index) => (
            <div className="col-12 col-sm-12 col-md-8 col-lg-4 col-xl-4">
              <div className="form-group input_form_label">
                <input
                  type="text"
                  name="device_name"
                  id="device_name"
                  className="form-control"
                  placeholder="Device Name"
                />
                <label className="common_label_form" htmlFor="device_name">
                  Device Name
                </label>
              </div>
            </div>
          ))}
        </div>

https://codesandbox.io/s/boring-dew-k1chw?file=/src/App.js

Collectives™ on Stack Overflow

How to create multiple input fields on click

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