Full-Stack React Projects - Second Edition

Completed lessons from the view

In the Enrollment component, in which we are rendering each lesson's details in the drawer view, we will give the student the option to mark the lesson as completed. This option will render conditionally, depending on whether the given lesson is already completed or not. This option will be added to the action property in CardHeader, as shown in the following code:

mern-classroom/client/enrollment/Enrollment.js:

action={<Button           onClick={markComplete}           variant={enrollment.lessonStatus[values.drawer].complete ?                                                                     'contained' : 'outlined'} color="secondary">          {enrollment.lessonStatus[values.drawer].complete ?                            "Completed" : "Mark as complete"}         </Button>}

If the given lessonStatus object has the complete attribute ...