Не работает map при пуше в массив, как быть?

Question

[OneLiL]

Есть код, где при нажатии на кнопку должен происходить пуш элемента в массив, и рендер его реактом с помощью оператора map, пуш проходит, но реакт не рендерит элемент

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ""
        }

      this.handleChange = this.handleChange.bind(this);
      this.addTask = this.addTask.bind(this);
      this.handleEnter = this.handleEnter.bind(this);
    }

    handleEnter(event){
      if (event.key === 'Enter'){
        this.addTask()
      };
    }

    addTask() {
      if (this.state.value !== ""){
        this.props.addTask(this.state.value)
      }
      this.setState({value: ""});
    }

    handleChange(event){
      this.setState({value: event.target.value})
    }

    render() {
        return (
          <div className="search-block">
              <input type="text" id="search-input" className="search-input top-space-md" onKeyPress={this.handleEnter} value={this.state.value} onChange={this.handleChange} placeholder="Write a task"/>
              <button id="search-btn" className="search-btn" aria-label="Создать таску" onClick={this.addTask}>
                  Create
              </button>
          </div>
        )
    }
}

function Main()  {

  let tasks = [];

  function addTask(task){
    tasks.push({
      id: tasks.length !== 0 ? tasks.length : 0,
      name: task,
      done: false
    });
    return tasks;
  }

  return (
      <main id="todo" role="main">
        <div className="main-content top-space-md">
          <div className="search-block">
            <Form addTask={addTask}/>
          </div>
          <div className="todo-items">
            {tasks.map(task => {
             return <Task task={task} key={task.id} title={task.name} done={task.done}/>
            })}
          </div>
        </div>
      </main>
    );
}

Comments

[WbICHA]

Реакт. Основы.

Answer 1

[TopsterTX]

Попробуй использовать concat вместо push

function addTask(task){
tasks.concat({
id: tasks.length !== 0 ? tasks.length : 0,
name: task,
done: false
});
return tasks;
}

Они оба добавляют в массив элементы, но push возвращает, (если я не ошибаюсь) ту запись которую он изменил, а concat изменённый массив