Reading: The documentation for react-calendar might be useful.
Use a Git client (such as GitHub Desktop on Windows/macOS, or the command line git on Linux) to clone the Iapetus repository from GitHub.
Demonstrate that the project "works" in its current state by doing npm install in the frontend folder, running the development server, and then viewing the application using a browser.
The application currently passes information from the calendar component into the Markdown editor component via local data and functions in the parent component. This works fine when the two components are immediate children of a common parent. A more flexible approach is to use properties (or "props") to pass information into a component. Here "information" can also include functions (sometimes called "behaviors" in this context).
The project contains a component, IapetusCalendar
, which is currently a trivial
wrapper around the React calendar. It is intended to eventually contain additional functionality
layered on top of the base calendar component. However, as a first step, the program should be
changed so that updates of the enclosed calendar are communicated to the Markdown editor
component located elsewhere.
Add an onChange
property to the parameter list of the
IapetusCalendar
component using object destructuring (e.g., ({ onChange
})
). Inside IapetusCalendar
the handling of a date change must now
invoke the function given to the component to inform outsiders of the change in addition to
changing the state of the date itself.
In the main application, import IapetusCalendar
from the JSX file (remove
the other calendar import since it is no longer relevant). Change the calendar component to:
<IapetusCalendar onChange={handleDateChange} />
You also need to modify the handleDateChange
function to remove all references
to the old calendar and the date information. Management of the date itself is now done
inside IapetusCalendar
There is no Part 2 for this lab, currently. This part is a placeholder for possible future additions to the lab.
Create a zip archive of your skeletal project, including the dist folder, and submit that archive to Canvas.
Last Revised: 2024-11-01
© Copyright 2024 by Peter Chapin <peter.chapin@vermontstate.edu>