https://www.codecademy.com/projects/practice/appointment-planner
Offline I completed a working version of Appointment Planner using [email protected], [email protected]. I am now doing a version from memory. It is fully functional with one exception, i.e., in the AppointmentForm the ContactPicker fails to render. The app is compiling without error. See screen shot below code. You can see I can add a contact and make an appointment, but cannot associate the appointment with a contact. The select element does not display. I have verified getContacts() is called via console log.
Even when I copy the solution code for those two components into the source files, I still get the following console error.
VM27 react_devtools_backend.js:4026 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
at ContactPicker
at label
at form
at AppointmentForm (http://localhost:8889/static/js/bundle.js:187:5)
at section
at Appointments (http://localhost:8889/static/js/bundle.js:383:5)
at Routes (http://localhost:8889/static/js/bundle.js:40920:5)
at main
at App (http://localhost:8889/static/js/bundle.js:39:82)
at Router (http://localhost:8889/static/js/bundle.js:40853:15)
at BrowserRouter (http://localhost:8889/static/js/bundle.js:39662:5)
Source Code:
import React from 'react'
import ContactPicker from "./contactPicker"
const AppointmentForm = ({
contacts,
title,
setTitle,
contact,
setContact,
date,
setDate,
time,
setTime,
handleSubmit,
alert,
}) => {
const getTodayString = () => {
const [month, day, year] = new Date()
.toLocaleDateString("en-US")
.split("/");
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
};
const getContactNames = () => {
return contacts.map((contact) => contact.name);
};
return (
<form onSubmit={handleSubmit}>
<label>
<input
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
placeholder="Appointment Title"
/>
</label>
<br />
<label>
<ContactPicker
name="contact"
value={contact}
contacts={getContactNames()}
onChange={(e) => setContact(e.target.value)}
placeholder="Appointment With"
/>
</label>
<br />
<label>
<input
type="date"
name="date"
min={getTodayString()}
value={date}
onChange={(e) => setDate(e.target.value)}
required
/>
</label>
<br />
<label>
<input
type="time"
name="time"
value={time}
onChange={(e) => setTime(e.target.value)}
required
/>
</label>
<button type="submit" disabled={alert ? true : false} >Add Appointment</button>
<h2 className="alert">{alert}</h2>
</form>
);
};
export default AppointmentForm
import React from 'react'
const ContactPicker = () => ({ name, onChange, contacts }) => {
return (
<select name={name} onChange={onChange}>
<option value={""} key={-1} selected="selected">
No Contact Selected
</option>
{contacts.map((contact) => {
return (
<option value={contact} key={contact}>
{contact}
</option>
);
})}
</select>
);
};
export default ContactPicker
**
**