Loading
Multi-Style Tailwind Components 23 exercises
Problem

Update the Modal to Support Dynamic Contents

Currently the Modal's title, body, and actions are all hardcoded.

Before we implement multiple style variants to our modal, let's update the Modal to support dynamic content.

A ModalProps type has been provided that includes the open and onClose props that have been used before. There are ne

Loading exercise

Transcript

0:00 Before we implement multiple style variants to our modal, let's make the content of this modal dynamic. Right now, we're just calling a Modal component, and all of the content, the title, the body of the modal is hardcoded inside that component.

0:13 If we look at the modal, we can identify what sort of data we would like to pass to it. We definitely want a title, we want a modal body, and then we have this action buttons section here, which could be called actions. This is the main three pieces of data that we want to make dynamic for this component.

0:30 I've prepared the terrain for you, so we have our open and onClose props already, but we've added some new props now. A title prop, we will pass the content through the children prop, and then we have this actions object.

0:43 We have an optional cancel action, because some modal will have only one confirm button, which receives a label string and an action function, and then a mandatory confirm action, again a label and an action.

0:56 Your task in this challenge is to pass these props to the modal component when calling it here, and then of course in the modal component replace the hardcoded title, body, and actions to consume the props that we're now passing to it. Good luck.