Как добавлять новый компонент с каждым инпутом в React?

Question

[arishaYako_14]

Делаю небольшое приложение для тренировки типа клона Trello. Мне нужно, когда я в форму ввожу что-то и нажимаю на ''create', мне нужно, чтобы у меня появлялся новый компонент с заголовком в виде этого инпута. Проблема в том, что мне нужно, чтобы при каждом новом инпуте появлялись еще компоненты, никак не получается это осуществить.
Вот как я пытаюсь это сделать:

import React, {Component} from 'react';
import './AddForm.css';
import TaskBoard from '../TaskBoard/TaskBoard';

export default class AddForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            input: '',
            obj: [],
            
        }
        this.onHandleChange = this.onHandleChange.bind(this);
        this.onHandleSubmit = this.onHandleSubmit.bind(this);
    }

    onHandleChange(e){
        this.setState({
            input: e.target.value
        });
        
    }

   onHandleSubmit(){
        this.state.obj.push(this.state.input);
        this.setState({
            input: ''
        })
   }

   

    render(){
        return(
            <div className = 'adder'>
                <h1 className = 'header'>Enter the type of tasks you need to be done:</h1>
                <div>
                <form>
                    <input className = 'board-add'  onSubmit = {this.onHandleSubmit} onChange = {this.onHandleChange} type = 'search' name = 'textarea' placeholder = 'How shall we call the board?'/>
                    <p><button className = 'cancel'>CANCEL</button>
                    <button onClick = {this.onHandleSubmit} className = 'create'>CREATE</button></p>
                </form>
                </div>
                {this.state.obj.map((item) => <TaskBoard taskType = {item} />)}
            </div> 

        );
    }
}

Answer 1

[Максим]

Вот так нельзя писать this.state.obj.push(this.state.input), для обновления стейта всегда нужно использовать setState({}) обязательно

А чтобы рендерить компоненты с помощью цикла, вам нужно дополнительно функцию написать примерно такую

createTaskBoard = () => {
    return this.state.obj.map((item) => <TaskBoard taskType = {item} />)
}

render () {
    return (
        <div className = 'adder'>
            // ... ваш код
            { this.createTaskBoard() }
        </div>
   )
}

Comments

[arishaYako_14]

Спасибо за ответ, сделала как Вы сказали, почему-то инпут в адресную строку записывается, так и до этого было, не могу сообразить почему все равно не выходит(

[Максим]

arishaYako_14, вот, посмотрите, вроде как все добавляется
Codesandbox

[arishaYako_14]

Максим Черябушкин, спасибо огромнейшее! заработало, я не совсем так в obj пушила. Вы очень мне помогли)

[Максим]

arishaYako_14, пожалуйста :)