I have the same feeling. I used to start with components first, then go back to App.js.
Is there any reason codecademy or others start with App.js first?
@napetico thx, I checked yours out, looking good!
I actually found a solution to my resetting-the-contact-after-submit-problem that I had with my appointment form in your code, thx 
1 Like
Hi folks 
Here is my solution on Github:
And the hosted site over on Netflify:
https://contacts-appointments.netlify.app/
Have a great week!
1 Like
Hi @jayteex 
Thanks for the comment below and for taking the time to check my code. I’m very happy it helped solve your resetting-the-contact-after-submit-problem.
I checked your Appointment Planner. Very nice work 
The styling and the code and quite clean.
I notice that the date input field in the Appointment page is not preventing the user to book an appointment on dates that already passed hehe - (… just some constructive feedback 
)
I think you can fix this if you move the min={getTodayString()} attribute from the time input to the date input. After this, you’ll notice that users wont be able to pick a date before the current date.
Thanks again for the comment and keep in touch (it’s always nice to have a coding-buddy)
Have a great week 
Hi @napetico,
thanks for your quick reply and your kind words!
That’s some good feedback, I will try to implement your suggestion
Cheerio 
1 Like
I think it’s called Object Shorthand Notation
I think the tasks and task hints need to be re-evaluated on this project. Some things i would have never done or figured out without the solution code. Also it seems like using the v18 solution code led me astray in some parts. Eventually looked at the older solution and realized some of the tasks and hints match up to only the old solution and not the new one… i eventually finished the project but got very frustrated with CodeCademy’s handling with some parts of this.
1 Like
Hi all! Here is my code for this project! Good luck to anyone doing this!
GitHub: GitHub - Hekimianz/appointment-planner: This is a CodeCademy project.
Netlify Deploy: https://appointment-planner-hekimianz.netlify.app/contacts
<3
Hello, I’m stuck with this project as I keep getting “contacts map is not a function”, when I try to map the contacts into the dropdown list in the Contact Picker element. I have checked using React developer tools that the variable contacts that I am passing to the element is an array, so I can’t understand why I keep coming up against this.
I copied part of the solution code when I got stuck with this, but it still doesn’t seem to work. So the path that contacts gets to to the Contact Picker element:
AppointmentsPage.jsx received contacts (which is an array of objects) as a prop and then does this with it:
const contactNames = useMemo (() => {return contacts.map(contact => contact.name)}, [contacts]);
return (
<div>
<section>
<h2>Add Appointment</h2>
<AppointmentForm
contacts={contactNames}
name={name}
setName={setName}
contact={contact}
setContact={setContact}
date={date}
setDate={setDate}
time={time}
setTime={setTime}
handleSubmit={handleSubmit}
/>
</section>
This array-of-strings version of contacts then gets passed on to AppointmentsForm.jsx as a prop, and in turn is passed on to the ContactPicker element as a prop.
It is in the ContactPicker.jsx that I always get the “is not a function” error, based on this code:
import React from "react";
export const ContactPicker = (contacts, value, onChange, name) => {
console.log(contacts);
return (
<>
<select name={name} id={name} onChange={onChange} value={value}>
<option value="" id="-1">No Contact Selected</option>
{contacts.map((contact) => {return <option value={contact} id = {contact}>{contact}</option>})}
</select>
</>
);
};
import React from "react";
export const ContactPicker = (contacts, value, onChange, name) => {
console.log(contacts);
return (
<>
<select name={name} id={name} onChange={onChange} value={value}>
<option value="" id="-1">No Contact Selected</option>
{contacts.map((contact) => {return <option value={contact} id = {contact}>{contact}</option>})}
</select>
</>
);
};
I have taken the contacts.map line out, and checked with the React dev tools that contacts as this point is an array of strings, so I am perplexed as why I keep getting this error.
Speaking for myself this was a daunting project at this stage of learning and took me a solid week to wrap my head around. I had previously skipped the Jammming project, but now feel able to make my back. If you have any questions. please look me up on Discord: calicorackhamjack
GitHub: GitHub - RobertPinney/AppointmentPlanner
Netlify: https://rob-appointment-planner.netlify.app
Best of luck to all of you!
Note: I never could figure out how to reset the contact dropdown when creating appointments. Please let me know if you have any better luck.
Cheers!
Hello, check this out
It was pretty difficult as someone who hasn’t learnt many react hooks. Some of it I got through myself but the last 3 steps I think I messed up.
1 Like
The props will be an object. You need to use object destructuring.
(Have a look at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring
// You wrote:
export const ContactPicker = (contacts, value, onChange, name) => {
// Change it to:
export const ContactPicker = ({contacts, value, onChange, name}) => {
The object destructuring is equivalent to:
// With object destructuring:
export const ContactPicker = ({contacts, value, onChange, name}) => {
// is equivalent to:
// Without object destructuring:
export const ContactPicker = (props) => {
let contacts = props.contacts;
let value = props.value;
...
Here is my project. I have also added some styling with bootstrap.
Mostly got through this exercise unscathed (although rather traumatized lol). The contacts made were at some point populating in the appointments page in the dropdown contacts picker, but now they decided not to.
So clicking “Submit” to Add Appointment shows an error. If anyone interested can help me figure out specifics to correct this, am all ears (and thank you in advance!)
*Netlify also now not directing to site 
Hello capnjack01,
Your work is excellent. Here’s my suggestion for resetting the dropdown of the ContactPicker:
You should set the default value of the option to an empty string like this: value=' ' (please refer to line 9 of ContactPicker.js).
<option key="default" value="">
No contact selected
</option>
Also, change setContactsValue("placeholder") to setContactsValue(" ") (please refer to line 39 of AppointmentsPage.js).
setContactsValue("");
I hope this helps! Let me know if you have any other questions.
"I’ve successfully completed my project and you can find my solution on GitHub:
You can also view the live webpage here:
appointment-planner live.
As usual, this project was quite challenging. I explored various resources, including YouTube tutorials and received substantial assistance from Microsoft Copilot. I encountered difficulties particularly with the TileList and Tile components due to the differences between the Contacts and Appointments lists. The solution involved using destructuring for each item in the data of TileList and utilizing Object.entries in the Tile component.
After completing the project, I revisited the completed version to enhance my understanding. This iterative process of learning and revising has been immensely beneficial."
Great job on completing your project! Remember, it’s perfectly okay to find projects challenging. It’s all part of the learning process. Keep up the good work! 
2 Likes
Hey Codecademy Community!
I’m excited to share my Appointment Planner project
Got suggestions or need some help? Reply to this post! I am here to support each other, share resources, and make this project a valuable learning experience for everyone involved.
Looking forward to seeing your contributions and discussing them here in the forum. Let’s make the Appointment Planner the best it can be, together!
Happy coding!
1 Like
I am really stuck with this, this is my code: GitHub - EmilioPG13/Appointment-planner: An app that manages contacts and appointments. The app consists of two pages: one to view and add contacts and one to view and add appointments.
Please help me get around this project, you can also find me in discord: rolandmurdoc
Had Fun with this one!
Github:
Live Website:
https://main--the-appointment-planner.netlify.app/contacts