- [Instructor] AWS Amplify Studio
has a lot of code generation functionality
that speeds up development time,
however, it's built for developers,
so being able to override
all the generated code is critical.
We'll use overrides in order to extend the functionality
of our components.
We want to hide and show the forms within the modals
based on user interaction.
When the Create Note button is clicked,
we'll want to render the create form,
and when an edit icon is clicked on each note,
we'll want to display the update form.
When the X on the form is clicked,
we'll want to hide the modal.
In the App.js file, import useState from React.
Let's create a state field
for whether or not the create modal should be shown.
(keys clicking)
We'll do the same for the update,
and then we'll also create a state field
for which note we want to update.
(keys clicking)
Let's add the override to display the create form
when Create Note is clicked.
When you create items within Figma, each element has a name
and you can use those element names to override the elements
within your React code.
You can open up the component file
for each UI component and view the override key for each.
If you open up the source UI components, NavBar.js file,
and scroll down, you'll notice the button sub component
which has the getOverrideProps function,
and then the name of the component in Figma.
I'll copy this key
and then each of my components takes an override object
so that I can modify their sub components.
The key will be the sub components key
that I want to modify,
and then the value will be the attribute
that I want to modify.
So in this case,
I'll do an onClick and setShowCreateModal to true.
Now we'll conditionally render this create note.
(keys clicking)
So if the showCreateModal is false,
then we'll hide the component.
Now let's open up the CreateNote form.
When we click the X vector,
we want the component to close.
So I'll take this MyIcon right here,
create an overrides object.
The key will be MyIcon,
and then the value will be an object with an onClick
where setShowCreateModal is set to false.
I also want to modify the type of the element.
Right now it's a vector, and for accessibility,
I'll want this actually to be a button.
So I'll do as: 'button.'
Now in my browser, I can click Create Note,
and then I can also click the X.
I can add my note and click Save,
and my note is added all the way on the 11th page.
Let's repeat the same exact process
for the Update Note form.
We'll want to open the modal
when one of these edit buttons is clicked.
If we open up the note UI,
this vector is the one that we want to override.
The overrides for the collection will be
a little bit different.
Instead of just trying to update a sub-component
of the note UI collection,
we're actually going to try to modify a sub-component
of the note UI component.
So instead of doing overrides,
we'll do override items.
Instead of an object, we'll do a function
and pass an overrides to this.
And the vector will be what we want to pass the override to.
We'll make it again into a button,
and then onClick, we'll set the showUpdateModel to true.
We also want to set which note is being modified,
so we'll do setUpdateNote
and set that to item.
We can pass as an argument to this function
the item and its index,
similar to a higher order function
like map or reduce within JavaScript.
So this will be the note that I want to modify.
Now in the UpdateNote,
the note that we want to modify is the UpdateNote
and for the overrides object,
we'll do MyIcon as, again, a button
and onClick we'll do set showUpdateModal to false.
I'll also have to add this same conditional here
with showUpdateModal.
Now you can see that the correct note updated.
You can use overrides to customize
AWS Amplify Studio generated UI components
within your own code.