Dynamic Controls Using React.js

In this article, we will learn how to use Dynamic controls using in React.

First of all, we have to create react application.

• Create a form with inputs name and emails. In the above code, you can see React state hook with an array to set default values. The map() method is used to iterate state elements.
• Add functions to create add and remove fields.

– Events

const handleChange = (e, index) => {
        let change = [...objectData];
        change[index][e.target.name] = e.target.value;
        setObjectData(change);
    }

    const addFormFields = (e) => {
        console.log('clicked')
        setObjectData([...objectData, { fname: '', lname: '', email: '' },]);
        console.log('objectData', objectData)
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(JSON.stringify(objectData));
    }

    const removeFormFields = (i) => {
        let arr = objectData;
        arr.splice(i, 1);
        setObjectData([...arr])
    }

My page will look like this

import React, { useState } from 'react'

function App() {

    const [objectData, setObjectData] = useState([{ fname: '', lname: '', email: '' }])

    const handleChange = (e, index) => {
        let change = [...objectData];
        change[index][e.target.name] = e.target.value;
        setObjectData(change);
    }

    const addFormFields = (e) => {
        console.log('clicked')
        setObjectData([...objectData, { fname: '', lname: '', email: '' },]);
        console.log('objectData', objectData)
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(JSON.stringify(objectData));
    }

    const removeFormFields = (i) => {
        let arr = objectData;
        arr.splice(i, 1);
        setObjectData([...arr])
    }

    return (
        <div className='main'>
            <form onSubmit={handleSubmit}>
                {objectData.map((el, index) => {
                    return (
                        <div className="main-form" key={index}>
                            <label>First Name : </label>
                            <input type="text" name="fname" value={el.fname} onChange={e => handleChange(e, index)} /><br />
                            <label>Last Name : </label>
                            <input type="text" name="lname" value={el.lname} onChange={e => handleChange(e, index)} /><br />
                            <label>Email : </label>
                            <input type="email" name="email" value={el.email} onChange={e => handleChange(e, index)} /><br />

                            <button type="button" className="button remove" onClick={() => removeFormFields()}>Remove</button>
                        </div>
                    );
                })}
                <div className="button-group">
                    <button className="button add" type="button" onClick={addFormFields}>Add</button>
                    <button className="button submit" type="submit">Submit</button>
                </div>
            </form>

        </div>
    )
}

export default App

Output: