Appointment Planner Tilelist Cannot read properties of undefined (reading 'map')

I’m stuck on the Appointment planner project

I completed all the steps but I keep getting a “Cannot read properties of undefined (reading ‘map’)” for my Tilelist components. I looked at the solution but I still cannot figure out what I’m doing wrong. I’ll include the relevant files below to avoid making this post too long and my github repo page.

TileList.js

import React from "react";
import {Tile} from '../tile/Tile';

export const TileList = ({list}) => {
  
  return (
    <div>
        {list.map((tile,index) => (
        <Tile key={index} tile={tile} />
        ))}
    </div>
  );
};

Contactpage.js

import React, { useEffect, useState } from "react";
import {ContactForm} from "../../components/contactForm/ContactForm";
import {TileList} from "../../components/tileList/TileList";

export const ContactsPage = ({addContacts, contacts}) => {
  /*
  Define state variables for 
  contact info and duplicate check
  */

 const [name, setName] = useState('');
 const [phone, setPhone] = useState('');
 const [email, setEmail] = useState('');
 const [duplicate, setDuplicate] = useState(false);
 
 
  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
   if(!duplicate){
     addContacts(name,phone,email);
     setName('');
     setPhone('');
     setEmail('');
   }
  };

  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */
 useEffect(() => {
   for (let contact of contacts){
     name === contact.name ? setDuplicate(true): setDuplicate(false)
   }
   return () => {
    setDuplicate(false);
   }
 },[contacts]);
 
  return (
    <div>
      <section>
        <h2>Add Contact</h2> 
        <ContactForm
          name = {name}
          email = {email}
          phone = {phone}
          setName = {setName}
          setEmail = {setEmail}
          setPhone = {setPhone}
          onSubmit = {handleSubmit} />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList
          list={contacts}
        />
      </section>
    </div>
  );
};

App.js

import React from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";
import { useState } from "react";
import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  /*
  Define state variables for 
  contacts and appointments 
  */
 const [contacts, setContacts] = useState([""]);
 const [appointments, setAppointment] = useState([""]);
 
  const ROUTES = {
    CONTACTS: "/contacts",
    APPOINTMENTS: "/appointments",
  };

  /*
  Implement functions to add data to
  contacts and appointments
  */
  const addContacts = (name,phone,email) => setContacts(prev => {
   contacts = [...prev,{name,phone,email}]
  })

  const addAppointments = (title,contact,time) => setAppointment(prev => {
    appointments = [...prev,{title,contact,time}]
  })

  return (
    <>
      <nav>
        <NavLink to={ROUTES.CONTACTS} activeClassName="active">
          Contacts
        </NavLink>
        <NavLink to={ROUTES.APPOINTMENTS} activeClassName="active">
          Appointments
        </NavLink>
      </nav>
      <main>
        <Switch>
          <Route exact path="/">
            <Redirect to={ROUTES.CONTACTS} />
          </Route>
          <Route path={ROUTES.CONTACTS}>
             {/* Add props to ContactsPage */}
            <ContactsPage
              addContacts={addContacts}
              contacts={contacts} />
          </Route>
          <Route path={ROUTES.APPOINTMENTS}>
            {/* Add props to AppointmentsPage */}
            <AppointmentsPage
              addAppointments={addAppointments}
              appointments={appointments} />
          </Route>
        </Switch>
      </main>
    </>
  );
}

export default App;

Github Repo: GitHub - Abcshake/AppointmentPlanner: React app excercise for portfolio

Hello!

The problem is not with TileList itself but with AppointmentsPage.

In AppointmentsPage you provide appointments prop to TileList instead of list.

1 Like

Thank you so much!
I didn’t pay attention to the name of the prop I sent to appointment page