DEV Community

How to handle multiple inputs in React

Debora Galeano on November 29, 2020

I recently had to refactor a React Form when working with multiple inputs and I thought I'd share how I did it. This is how my form looks like: ...

Read full post

Musawer Shah • Dec 2 '21

Hi this method works fine for multiple input but just with normal input fields. What if their are some booleans and arrays??? E.g In vue.js I have the following data model which change at some point in time, which in that case two way data binding make it way easier for us.

data() {
        return {
            valid: false,
            showDialog: true,
            showFullLoading: false,
            isImage: false,
            product: {
                name_en: "",
                name_ar: "",
                category: "",
                subcategory: "",
                description_en: "",
                description_ar: "",
                meta_title: "",
                meta_description: "",
                meta_keywords: "",
                price: 0.0,
                showSale: false,
                sale: 0.0,
                image: "",
                saleAfterStock: false,
                stock: 10
            },
            images: [
                { image: null, isImage: false, id: shortid.generate() },
                { image: null, isImage: false, id: shortid.generate() },
                { image: null, isImage: false, id: shortid.generate() },
                { image: null, isImage: false, id: shortid.generate() }
            ],
            attributes: [],
            defaultVariants: [],
            dataWeightClass: ["Gram", "Kilo Gram", "Pound"],
            dataDimensionClass: ["Centimeter", "Inch"],
            showAttributeDialog: false,
            sizeGuide: false,
            sizeGuides: [],
            attribute: {
                title_en: "",
                title_ar: "",
                description_en: "",
                description_ar: "",
                image: null,
                isImage: false
            },
            subcategories: [],
            options: [],
            variantsHeaders: [
                { text: "Variant", value: "name" },
                { text: "Price", value: "price" },
                { text: "Stock", value: "quantity" },
                { text: "Visibility", value: "visibility" }
            ],
            defaultVariantId: "",
            defaultPreviewId: ""
        };
    },

jgifford82 • Sep 14 '22

Thank you so much!! I'm learning about controlled forms, and this has been incredibly helpful!

donchocska • Dec 14 '20

Amazing perofrmance. Very thanks!

Sparsh Gupta • May 1 '22

Hi, just wanted to ask ,
since we are changing the state in handleInputChange
therefore, every time we will type in something the whole component will re-render since the state is changing
so isn't it an expensive approach in respect to performance?

Kasaija Kenneth • Nov 26 • Edited

This was so insightfull. But i have one quetion. how then would you reset the input fields upon form submission?. is it as simple as calling e.g setFormFields ( initialState )
Here my assumption is that initialState is an object e.g
const initialState={
someInput: ' ',
anotherInput: ' ',
}

tombohub • Dec 7 '22 • Edited

very good , but I don't like it. Now you have to maintain the names of the inputs, which is a string. It's a bug waiting to happen.

I suggest using this solution: stackoverflow.com/a/47707719/1079002

btw, do you have solution for nested objects? I need that, thanks!

Yahaya Kehinde • Nov 30 '20

Amazing Deborah ! ☺️☺️

haleemik • May 18 '21

Can we map the input filed using an array of states. So that we can reduce the code size. Is it possible to do that?

SHAMIM • Aug 17 '21

Thanks for providing with an useful information in a synchronize manner ...

Majid Mohamed • Feb 5 '21

Amazing perofrmance. Very thanks!

Salvador Beltrán • Jun 3 '21

Thank you so much, I was handling this terrible, but with your handleChange I was able to refactor the entire event! fav*

Aboubakr Ned • Feb 28 '21

Wow, that exactly what I was looking for

Julio Jean Fils • Feb 15 '21

Thank you

Yogesh More • Apr 19 '21

The spread operator has not used the in-class component. and this what I am looking for thanks for the exact answer :)

Jocanola • Jan 9 '21

Really clean.

Suhrob Muborakshoev • May 7 '21

Thanks for the explanation. Kudos

Giri • Jun 15 '23

Awesome article!

G.Singh • May 7 '21

Thank you so much!

Omoke Chuku • Feb 6 '21

This is beautiful!

krishna-Tiwari • Oct 25 '21

thanks a lot iam actually looking for it thanks again

Ch_Hadi • Oct 14 '21

Noice , i like that Deborah

PhilJotham14 • May 13 '21

for example if I wanted to insert two value in input how do I go by that
value={values.position} for example onChange=" {(e)=> this.onChangeInput(e)}; { handleChange }; "

Abhay Patil • Mar 4 '23

When using state like this same example I am getting warning - input type is getting uncontrolled
when I use seperate state for all feilds I don't get this error