How to put an array in react js array of arrays?

Question

JavaScript

how to create an array which is an array of arrays (which can be replenished with elements and elements can be removed from it as in child arrays) react js

class Field extends React.Component {   

                constructor(props) {
                    super(props);
                    this.state = {
                        tasks: []
                    };
                };
                addList = (text) => {
                    var arrList = this.state.tasks;
                    arrList.push (text);
                    this.setState ({tasks: arrTask});
                };
                addTask = (text) => {
                    var arrTask = this.state.tasks;
                    arrTask.push (text);
                    this.setState ({tasks: arrTask});
                };
                deleteBlock = (i) => {
                    var arrTask = this.state.tasks;
                    arrTask.splice (i, 1);
                    this.setState ({tasks: arrTask});
                };
                updateText = (text, i) => {
                    var arrTask = this.state.tasks;
                    arrTask[i] = text;
                    this.setState ({tasks: arrTask});
                };
                eachTask = (item, i) => {
                    return (
                        <Task key={i} index={i} update={this.updateText} deleteBlock={this.deleteBlock}>
                            {item}
                        </Task>
                    );
                };
                render() {
                    return (
                        <div>
                                <div className="field">
                                    <h2>Задание</h2>
                                    {this.state.tasks.map (this.eachTask)}
                                    <button onClick={this.addTask.bind (null, 'простое задание')} className="btn new">Новое Задание</button>
                                </div>
                            
                            <button onClick={this.addTask.bind (null, 'простое задание')} className="btn new">Новое     Задание</button>
                        </div>
                    );
                }
            }

Answer 1

Don't do that, you still mutate the state by referring to it

var arrList = this.state.tasks;
arrList.push (text);

So it's better, you work with a copy

var arrList = [...this.state.tasks];
arrList.push (text);