Refactoring for Dynamic Modal Contents
Let's take this conversion step-by-step, starting with the title
prop.
Inside of index.tsx
let's add the title
prop with a string of "hellooooooo":
. Let's also add a cancel action. The label here will be "No thanks." and for the action we'll do the same, a function that sets the IsOpen prop to .
1:38 None of that is implemented yet because it's still hardcoded in the modal component. Let's go there, scroll down to find the action buttons, there they are. The first button here is the Confirm action so the text can be actions.confirm.label, and you can see I don't even have to type. The action instead of just onClose will be actions.confirm.action.
2:05 You can see that now the button says Yes please! And when I click it, it will close the modal. Nice. We can do the same with the cancel action. onClick we want to fire the actions.cancel.action, and the label will be actions.cancel.label.
2:23 Beyond that we only want to show this button if there is an actions.cancel object passed in the actions prop, so let's check here if actions.cancel and if that's the case render our button. Let's hit Save and now we're expecting our buttons to say Yes please! And No thanks, and sure enough they do. Great stuff.
2:45 This is awesome, and now I promise we can go and implement the multiple style variants with Tailwind CSS.