list.map is not a function help create-react-app

Question

Hi could someone tell me why I am getting the list.map is not a function error? I am pretty sure my React code makes list an array but I am a beginner so I may have overlooked something

import React, { useState, useEffect } from "react";
import Task from "./Task";

function Home() {  
  const [text, setText] = useState("");
  const [task, setTask] = useState("");
  const [list, setList] = useState([]);

  useEffect(() => {
    setList(list.push(task));
  }, [task]);

  const addTask = (e) => {
    e.preventDefault();
    setTask(text);
    setText("");
  };

  const updateText = (e) => {
    setText(e.target.value);
  };

  return (
    <div className="Home">
      <h3>Home Page</h3>
      <form onSubmit={addTask}>
        <input type="text" value={text} onChange={updateText} />
        <button type="submit">Add</button>
      </form>
      <div className="listoftasks">
        {list.map((t) => (
          <Task
            text={t}            
          />
        ))}
      </div>
    </div>
  );
}

export default Home;

Answer 1

Array.push() does not return the updated array. Therefore you should use Array.concat() -

useEffect(() => {
    setList(list.concat(task));
  }, [task]);