How to dynamically add fields to a form on React

Question

I make a simple react app. I have a React form with field. And we can add dynamically more and more same fields. And submit them together.

Maybe I can use for or while? But how? And I must add dynamically fields name in form, and dynamically fields to object for submit.

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            task: '',
            count: [1]
        };
        this.addTask = this.addTask.bind(this);
        this.change = this.change.bind(this);
    }

    render() {
        return (
            <div>
                <h1>Form</h1>
                <form onSubmit = {this.onSubmit} method='post'>
                    <div>
                        {this.state.count.map((item, index) => {
                            return (
                                <div key={index}>
                                    <input type='text' value={this.state.task} name='task' onChange={this.change} />
                                </div>
                            )
                        })}
                    </div>

                    <button onClick={this.addTask}>addTask</button>
                    <button>submit</button>
                </form>
            </div>
        );
    }

    addTask(e) {
        e.preventDefault();
        this.setState({
            count: [...this.state.count, '1']
        })
    }

    onSubmit = (e) => {
        e.preventDefault();
        const {submit} = this.props;
        submit({
            task: this.state.task
        });

        this.setState({
            task: ''
        })
    };

    change(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }
}

export default connect(null, { submit })(Form);

Answer 1

You can map through an array of your objects:

constructor(props) {
        super(props);
        this.state = {
            task: '',
            count: [1],
            components: []
        };
        this.addTask = this.addTask.bind(this);
        this.change = this.change.bind(this);
    }

    render() {
        return (
            <div>
                <h1>Form</h1>
                <form onSubmit = {this.onSubmit} method='post'>
                    <div>
                        {this.state.count.map((item, index) => {
                            return (
                                <div key={index}>
                                    {this.state.components.map(comp => comp)}
                                </div>
                            )
                        })}
                    </div>

                    <button onClick={this.addTask}>addTask</button>
                    <button>submit</button>
                </form>
            </div>
        );
    }

    addTask(e) {
        e.preventDefault();
        this.setState({
            count: [...this.state.count, '1'],
            components: this.state.components.concat(<input type='text' value={this.state.task} name='task' onChange={this.change} key={this.state.count.length + 1} />)
        })
    }