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