Appointment Planner Challenge Project (React)

Check your import for typos.

Check how you’re passing your handleSubmit props for typos and logic.

1 Like

Here is my solution to the Appointment Planner project with a gratuitous phone number formatter and working netlify form submission how-to-integrate-netlifys-form-handling-in-a-react-app

1 Like

Hello learners i wonder if there is a step by step guide for this project. It is a bit more difficult than any other task.

Hi Community.
Here is my solution to the Appointment Planner deployed using surge.
Link to Deployed APP
GitHub Repo

I couldn’t see a step by step guide, but I managed to complete everything according to the requirements and I committed changes in approximately the same order as the instructions. So, if you take a look at my commit history that might help you figure out what’s going wrong! :slight_smile:

1 Like

Hello, I got an error, and don’t have any idea what’s causing it. Because I literally double checked it. The error message is in the image on bottom, and the code where the error is shown is here
"import React from “react”;
import {Tile} from ‘…/tile/Tile’

export const TileList = ({props}) => {
return (

{, index) => )}


Please help me out

hello, you are getting an error because of how you tried to extract the array from props.
When you’re trying to use destructuring assignment there has to be a property match.
x = {
name: “fullstack_3”,
site: “
There are two properties in x, which are name and site.
we can access the values by using dot notation: and

or use destructuring {name,site}.

if you compare the example I gave above to your code, you’d notice you’re trying to access name and site properties by doing {x} which is wrong.

here’s my working code

export const TileList = (props) => {
let data = props.contacts || props.appointments;
return (

let {name, …description} = item;



1 Like

I’m not sure either about Kalewine, but Traversy Media tutorial is an excellent practice for many of us learners, figuring out the Appointment Planner.
In my case, I just did the tuto, came back to Appointment Planner and did it with a clear picture in my mind of how to do it. The guy explains concepts while showing examples as he goes which made me clear quite a lot of concepts in mi mind.
No idea how to make useful videos for your students Codecademy? You must give it a go!
Just saying …

Hi, Below is my Appointment planner challenge.

1 Like

Hey All,

I completed the project and stuck my code on Github. Feel free to review and reach out if you have any questions.

I did get it deployed on Netlify using the helpful link from @tjupp but took it down cus I’m running out of space there and need it for other courses I’m doing.

I didn’t add any additional features but one thing I did differently from the example code was wrapping the addContact and addAppointment functions in useCallback(). I have default arrays of contact & appointment data that would disappear upon adding either a new contact or a new appointment. This function was used in the Jammming project (also very tough) and I’m not sure why but in this instance it helped prevent disappearing default state values.

If anyone knows why useCallback works like this, let me know. The React docs and most of Stackoverflow say that your app should work without it.



Here’s my Appointment Planner. Feel free to comment or ask if you have any questions :slight_smile:
Git Repository


1 Like

Hi There, I just finished up my project! Here is a link to my repo!


Hi Everyone
I also just finished the Appointment planner project. Feel free to have a look and let me know if you see any possible improvement.
Link to my: Git-Hub Repo.

PS: Would love to connect with more student, As the course is getting more intense, Let me know…

1 Like

Hi Johnny.

i just had a look at your code and it looks really good,
I saw you used this line of code:

  const addContact = (name, phone, email) => {
    setContacts((prev) => [...prev, {name, phone, email}]);

I didn’t know we could initiate the key and value of an object this way (by only referring to the parameter of the function).
This is very useful, thank you! How is this method called?

How is the course going for you so far? I noiticed that you are also a light designer. I happen to also be in the industry :slight_smile:


That’s awesome dude! I have used codecademy off and on for quite a few years, but it wasn’t till recently that I started to use it with the goal of changing industries in mind. I like it because I feel like I get to learn at my own pace and take time on concepts I struggle to grasp and then speed through stuff that I get quickly.
I’m not sure what it is called, but I have seen that way of building an object before, and I just picked it up.


Finished Code.
I started from scratch. Didn’t know what we were supposed to do with the ‘description’ prop since none of the components or values have a description attribute. Used Redux with some util function to simulate using the Router Form to send data to a database/api source.


I didn’t like the fact that instructions started with App.js and then worked through to the smaller components - it might it impossible to check things as I was going through. I prefer to start with smaller components and work up so I can tweak as I go along and I find it easier to debug if something goes wrong. So at some points I was tempted to start again from scratch and do it backwards to their instructions… but I managed it in the end!
Here is the final version:
and here is my GitHub: GitHub - evg4/appointment-planner


Had a great time doing this project. Straight forward but ran into some bumps on the road on the way.

Appreciate feedback & suggestions to my solution!

Contact me if you’re recruiting

1 Like

Hello everyone :wave:t3:
I just finished the Appointment Planner project and I wanted to share with you.
Feedback and suggestions welcome (and very appreciated).
Have a great week!

GitHub Code:

Netlify Deployed Site: