Appointment Planner Challenge Project (React)

Am I missing stuff, or is this just god awful instructions as usual? Step 8 instructs us only to pass the contacts array as a prop to ContactPicker and then step nine instructs us to receive two props.

If you look at the solution file, there’s a getContactNames function defined in AppointmentForm yet nowhere in the instructions does instruct us to write it.

1 Like

Can someone explain to me why we set the default value of useState, for the contact variable, to =====>
useState(contacts.length > 0 ? contacts[0].name : “”);
This is done in AppointmentsPage and I don’t understand where it comes from.

A side not b/c a lot of ppl say that the directions are unclear. The directions are more clear when you look at the hint. For the most part I feel that the hints should just be the directions. Also it would be beneficial if you also included a video for these projects as well. I think as people learn to code it’s better for you to view a video giving an in-depth explanation versus trying to figure things out by looking at the solution.

1 Like

Here is my solution:

GitHub Repo
Live Site

I found it challenging to start off but then focused on each individual bit until one unit worked before moving to the next and quite happy I got through without using the hints. I did find it challenging at the start but after looking back over the previous exercises, I got there in the end.

I wish there was more guidance on using jest and enzyme from the previous unit and thought it would have been a good exercise to implement it but I wasn’t able to do so.

Here are the ways the solutions differed from mine which improvements I would make to mine:

  • Use array method .find instead of using a for of loop to loop through the contacts array
  • Define the eventHandler functions inline of where they are used.

It is meant so that the rendered “contact” dropdown (created by AppointmentsForm and ContactPicker) would show the first contact in the “contacts” array by default (providing the “contacts” array is not empty).

I didn’t use it myself, as it is not a requirement in the exercise.
The provided solution is abundant with additions to the code, which though useful, are not necessary and only make sense in hindsight, after the entire app us up and running and you (mostly) understand how it works.

hi all,
if u can help me i can’t understand why we use (form) for contact for example in ContactForm component but we pass name, email, phone as props for it :frowning:
i think that contactForm Component must have name,phone email as states then send it to ContactPage Container just to display it

Appointment Planner

Hey, just completed the Appointments Planner project. Added local storage, delete button and sorting by last name for contacts. Any feedback would be greatly appreciated. Did anyone figure out a way to reset to the default first select option for the appointment contact after submitting the form?

Check out my project code on GitHub at

See it live on Netlify

1 Like

Hey, your Live Site link doesn’t seem to work. Not sure if its the same issue but I had the same problem when Netlify was trying to redirect to the /contacts or /appointments url. The solution is to create a _redirects file in your public folder without a file extension, then copy and paste this code into the file as it appears: /* /index.html 200
Hopefully it should sort it out.

Hello! :wave:
It"s my Appointment Planner Project for testing. :female_detective:
(95% of Front-End Engineer career Path).

Appointment Planner React App


Cheers for the heads up
Hopefully this works: Relink to live site

Hey, those additions are cool. I need to learn about local storage. I was able to reset to the default first select just by passing an empty string to setContact, and passing the state down to the ContactPicker component into the value attribute of the < select > element.

1 Like

Nice job with the local storage and delete button. I wasn’t able to get the sorting by last name to work–is it supposed to be automatic? My “Zed Zed” is appearing higher in the list than “Steve Steve.” (I’m very creative.)

Here’s mine:


I added a delete button and ability to select multiple contacts. Sorting seems like a good idea too.


Hey, thanks for taking the time to have a look :+1: Haha well there was guy at my school called Colin Collins. The sorting doesn’t work straight after you submit a contact unfortunately, but does when you refresh the page, or go into Appointments and go back in.

Hey, I like the layout and the way it adds contacts/appointments, very user friendly. I also like the phone and email icons. I’ve had trouble on some of these trying to figure out what the phone no. format is :sweat_smile:, you can add a title attribute to the input field, something like title=‘Must contain 11 digits’. The message comes up in the ‘please match requested format’ window.

Hi all. Here is my solution:

Hi, I am a complete begginer and just finished the project. It would have been impossible for me without looking at the solution the first time. I think I did learn a lot, but I feel bad because it is kind of cheating looking at the solution. This also happened with that JS hat videogame project.

I guess it is not so bad because other people had the same issue but I think Codecademy could help making this point clear to us because it really feels like cheating and that is not cool.

1 Like

Yeah, it was the same for me. I think this should be broken down into more steps instead of huge chunks of steps at once. It was a massive leap compared to previous exercises and just plain overwhelming for me personally. Not the smoothest learning experience but just going to try repeat this process a few times to get it.