Визуализируйте один и тот же класс React каждый раз, когда пользователь нажимает кнопку отправки.

Question

совершенно новый для JSX / React, я создал функцию, которая принимает реквизиты из другого класса и выводит блок, но это работает только один раз и не продолжает добавлять новые блоки задач после первого начального блока.

КОД:

var i = 0;
function createNewTask() {
    var title = document.getElementById('textbox1').value;
    var desc = document.getElementById('textarea1').value;
    var priority = document.getElementById('select1').value;
    class CreateNewTask extends React.Component {
        render() {
            return(<div class="task-card" id={priority}>
                <h1>{title}</h1>
                <p>{desc}</p>
            </div>);
        }
    }
    ReactDOM.render(<CreateNewTask />, document.getElementById('task-cards'));
}

function newTask() {
    i+=1;
    if(i == 1) {         
        class NewTask extends React.Component {

            render() {
                return (
                <div class="new-task-card">
                    <form class="container">
                        <div 
                        class="form-group form-custom">
                            <label 
                            for="textbox1">
                            Task Header
                            </label>
                            <input 
                            type="text" 
                            class="form-control" 
                            id="textbox1" 
                            placeholder="Enter Task Header">
                            </input>
                        </div>
                        <div 
                        class="form-group form-custom">
                            <label 
                            for="textarea1">Task Description
                            </label>
                            <textarea 
                            class="form-control" 
                            id="textarea1" 
                            rows="10">
                            </textarea>
                        </div>
                        <div class="form-group form-custom">
                            <label for="select1">Choose Task Priority</label>
                            <select class="form-control" id="select1">
                                <option>Very-Hot</option>
                                <option>Hot</option>
                                <option>Mild</option>
                                <option>Cool</option>
                            </select>
                        </div>
                        <button type="submit" onClick={createNewTask} class="btn btn-primary form-btn form-custom">Submit</button>
                    </form>
                </div>
                );
            }
        }
        ReactDOM.render(<NewTask/>, document.getElementById('forms'));
    }
    else if(i == 2) {
        class NewTask extends React.Component {
            render() {
                return (document.getElementById('new-task-card'));
            }
        }
        ReactDOM.render(<NewTask/>, document.getElementById('forms'));
        i = 0;
    }
} 

Итак, в заключение я хотел бы иметь возможность продолжить рендеринг CreateNewTask для вывода большего количества блоков в мою DOM.