CODEWITHSUNDEEP
javascriptreactjs
macjayz
macjayz

Reputation: 47

failed to display array items and flags error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

i'm a newbee still flirting around reactjs. why do i get this error anytime i trying displaying the array content of tasks. this is my App.js

import React from 'react';
import { useState } from 'react'
import './index.css';
import Navbar from './components/layout/Navbar';
import Tasks from './components/Tasks';
// import Message from './components/Message';
// import FunctionClick from './components/FunctionClick';

const App = () => {
  const [tasks, setTasks] = useState([
    {
      id: 1,
      text: 'This is the first text',
      day: 'Feb 5th at 2:30pm',
      reminder: true,
    },
    {
      id: 2,
      text: 'Meeting at School',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
    {
      id: 3,
      text: 'third meeting',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
  ])
 
  return (
    <div className="container">
      <Navbar />
      <Tasks tasks={tasks}/>
    </div>
  
  );

}

export default App;

and this is my Tasks.js

import React from 'react'
import  Task  from './Task'

const Tasks = ({tasks}) => {
  
  return (
    <>
    {tasks.map((task) => (
    <Task key={task.id} task={task} />
    ))}
    </>
  )
}

export default Tasks

Task.js

import React from 'react'

export const Task = ({task}) => {
  return (
    <div className='task'>
        <h3>{task.text}
        </h3>
    </div>
  )
}

export default Task;

it doesn't show error in the console but shows in the browser. i've been stuck. help me please. you can try testing it on your app. thanks

Upvotes: 0

Views: 59

Answers (1)

sodhankit
sodhankit

Reputation: 1248

I think as per your error

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

if you make changes as following

const Tasks = ({tasks}) => {
  if(tasks && tasks.length > 0) {
    return (
      <>
      {tasks.map((task) => (
        <Task key={task.id} task={task} />
       ))}
       </>
     )
    }
   else return null;
}

then you can skip that error, As you can see I put if condition inside Tasks component to check tasks array

Upvotes: 1

Related Questions