TypeError: Cannot read property 'map' of undefined.....How to fix it

user_13978700 0
Viewed 66

I'm new to React. I thought it'll be fun to make a ToDoList Project but it ended up being a lot of work, and still, I can't figure out this error. firstFile-app.js this file contains the useEffect..in which I'm having issues

import React,{ useState, useEffect } from "react";
import './App.css';
//Importing Components
import Form from "./components/Form" 
import TodoList from "./components/TodoList";
function App() {
  // All of our states
  const [inputText,setInputText] = useState("");
  const [todos,setTodos] = useState([]);
  const {status,setStatus} = useState("all");
  const {filteredTodos,setFilteredTodos} = useState([]);
  // Use Effect
  useEffect(() => {
    filterHandler();
  }, [todos, status]);
  // Functions
  const filterHandler = () =>
  {
    switch (status)
    {
      case "completed":
        setFilteredTodos(todos.filter((todo) => todo.completed === true));
        break;
      case "uncompleted":
        setFilteredTodos(todos.filter((todo) => todo.completed === false));
        break;
      default:
        setFilteredTodos(todos);
        break;
    }
  };
  return (
    <div className="App">
      <header>
        <h1>Afraz's ToDo List</h1>
      </header>
      <Form 
      inputText={inputText} 
      todos={todos} 
      setTodos={setTodos} 
      setInputText={setInputText}
      setStatus={setStatus}
      />
      <TodoList 
      setTodos={setTodos} 
      todos={todos}
      filteredTodos={filteredTodos}
      />
    </div>
  );
}

export default App;

secondFile-todolist.js this is the file in which I'm trying to use the function...to render the list

import React from "react";
// Import Components
import Todo from "./Todo";
const TodoList = ({ todos,setTodos,filteredTodos }) =>
{
  console.log(filteredTodos);
  return(
    <div className="todo-container">
      <ul className="todo-list">
        {filteredTodos.map((todo) => (
          <Todo 
          setTodos={setTodos} 
          todos={todos} 
          key={todo.id} 
          todo={todo} 
          text={todo.text}
          />
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

TypeError: Cannot read property 'map' of undefined.....How to fix it? i have no clue! as I said I'm new to react.

reactjs javascript
1 Answers

First you have to understand that useState is asynchronous.

And your const {filteredTodos,setFilteredTodos} = useState([]); iniciate emtpy to only when your pages loades it call ur useEffect that set your switch action to fill ur filteredTodos in a setState, which again, is asynchronous, and you are imediatily trying to mapping over an array that possible has no value yeat, since you dont know when you will receive the values of your switch action.

What you need to do is:

~ Put an condition to only map over your filteredTodos when you have a value on it, something like that:

<div>
{filteredTodos.length > 0 && 
filteredTodos.map(todo => ( ...)
)}
</div>

Also, pratice naming better yours files name, dont use firstFile-navbar ... secondFile-navbar...

for example: try naming like Navbar, NavbarItems

user_149190450
Related