Discussion on: How to handle multiple inputs in React

[Musawer Shah]

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]

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