Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner

i had problem for the last step to choose the contact name from the “contact picker” component .this step require to add contacts lists to appointmentsPage by selected the option from the dropDown button that’s triggered the addAppoitments function to add contact to my appointments list but I had this error appear in the screen : “TypeError: Cannot read properties of undefined (reading ‘map’)”;

this is all my files I had worked in sublime text3 editor :
the “App.js File”:

import React, {useState} from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";

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([{name:"Farid", phone:+14570258, email:"faridgh@farou.com"}, {name:"Ali", phone:+28573258, email:"alimm6@alia.com"}, {name:"Kamel", phone:+14970603, email:"kamel04@kam.com"}]);
const [appointments, setAppointments] = useState([{title:"work", date:"27/10/2021", time:"9:00"},
{title:"change time", date:"24/10/2021", time:"8:30"}, {title:"health care", date:"02/11/2021", time:"9:00"}]);
  const ROUTES = {
    CONTACTS: "/contacts",
    APPOINTMENTS: "/appointments",
  };

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

    )
  };
  const addAppointments = (title, contact, date, time) =>{
const appointment = {
  title: title,
  contact: contact,
  date: date,
  time: time
};
setAppointments(prevAppointments => [...prevAppointments, appointment])
  }

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

export default App;

this is the AppointmentsPage.js file :

import React, {useState} from "react";
import {TileList} from "../../components/tileList/TileList";
import {AppointmentForm} from "../../components/appointmentForm/AppointmentForm";

export const AppointmentsPage = (props) => {
  /*
  Define state variables for 
  appointment info
  */
  const [title, setTitle] = useState('');
  const [contact, setContact] = useState({});
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const {appointment, contacts, onAdd} = props;

  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data  
    */
   
  };

  return (
    <div>
      <section>
        <h2>Add Appointment</h2>
        <AppointmentForm title={props.title} date={props.date} time={props.time} onChangeTitle={(event)=> setTitle(event.target.value)} onChangeDate={(event)=> setDate(event.target.value)} onChangeTime={(event)=> setTime(event.target.value)} />
      </section>
      <hr />
      <section>
        <h2>Appointments</h2>
        <TileList appointments={props.data} />
      </section>
    </div>
  );
};

this is the AppointmentForm.js file:

import React, {useState} from "react";
import {ContactPicker} from "../contactPicker/ContactPicker"


export const AppointmentForm = (props, {
  
  title,
  setTitle: setTitle,
  contact: contact,
  setContact: setContact,
  date: date,
  setDate: setDate,
  time: time,
  setTime: setTime,
  handleSubmit: onSubmit
}) => {
  
  const getTodayString = () => {
    const [month, day, year] = new Date()
      .toLocaleDateString("en-US")
      .split("/");
    console.log(`${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`);
  };

  return (
  <form onSubmit={props.onSubmit} >
    <label>
    Enter the title:
    <input type="text" value={props.title} name="title" onChangeTitle={props.onChangeTitle} />
    </label>
   <label>
    Enter the date:
    <input type="date" value={props.date} name="date" onChangeDate={props.onChangeDate} />
    </label>
    <label>
    Enter the time:
    <input type="time" value={props.time} name="time" onChangeTime={props.onChangeTime} />
    </label>
    <ContactPicker contacts={props.contacts} />
    <button type = 'submit'>Click to submit</button>
    </form>
  );
};

this is the TileList file:

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

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

this is the Tile file component :

*import React from "react";

export const Tile = (props) => {
	const dataObject = props.object;
	
	const arrayOb = Object.keys(dataObject);
	arrayOb.shift();
console.log(arrayOb);
  return (
    <div className="tile-container">
      <p className="tile-title" >{props.object[Object.keys(props.object)[0]]}</p>
     {arrayOb.map((key, index)=> <p className="tile" >{key}: {dataObject[key]}</p>)}
    </div>
  );}

this is the ContactPicker.js file :

import React from "react";
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';


export const ContactPicker = (props) => {
  return (
  	<div>
    <ButtonDropdown>
    	<DropdownToggle caret>
        Contacts name
      </DropdownToggle>
      <DropdownMenu>
      {props.contacts.map(item=> (<DropdownItem>{item.name}</DropdownItem>))}
      </DropdownMenu>
    </ButtonDropdown>
    </div>
  );
};

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner

Hi,
you pass props.data as props here:
App:

That means that props doesn’t have a property “data” anymore. You should be able to access contacts directly here:

Log the props in TileList component to be sure.

1 Like

thank you my friend…

hello my friend .do you have facebook account