Create a Child Component and Interact with It
Our code base has grown in the previous steps. Let’s now take a minute to refactor our bear list component into several smaller components. We are going to move the code of bear tiles into a new component.
Create the Bear Tile Component
- In VS Code, right-click the
lwc
folder and click SFDX: Create Lightning Web Component. - Name the component
bearTile
. - Open
bearList.html
and cut all the code between<!-- Start bear tile -->
and<!-- End bear tile -->
. - Paste the code within the
template
tags ofbearTile.html
. Once you’re done,bearTile.html
should look like this. - Replace the contents of
bearTile.js
with: We added abear
property decorated with@api
. This exposes thebear
property to any parent component. - Delete
bearList.css
. - Create a new
bearTile.css
file in thebearTile
directory and paste the following code into the file. - Open
bearList.html
and replace the content between the<!-- Start bear tile -->
and<!-- End bear tile -->
comments with<c-bear-tile bear={bear}></c-bear-tile>
. Once you are done,bearList.html
should look like this. This references our bear tile component with thebear
attribute that we defined in the previous steps. Notice that our component folder and files are namedbearTile
, but the tag we added isc-bear-tile
. The startingc
represents the default namespace, appended with the name of the component in lowercase, with dashes separating what use to be capital letters. - Deploy the updated code to the org and test your new list component. It should look better with a subtle gradient.
Interact with the Bear List Component
Rangers are requesting the ability to quickly look at a bear record and edit it without having to navigate away from the homepage. Let's make bear tiles clickable and open an editable bear record form.
- Edit
bearTile.html
and add the following code after the<lightning-card title={bear.Name} class="bear-tile">
tag. We added an edit button that fires thehandleOpenRecordClick
function. The button is placed on the lightning card using theactions
slot. A slot is a placeholder for markup that a parent component passes into a component’s body. - Edit
bearTile.js
and add the following function before the last closing bracket. Code highlights:- The
handleOpenRecordClick
function is called when a user clicks on the open record button of a bear tile. - The function creates and fires a custom
bearview
event that holds the bear record id.
- The
- Edit
bearList.html
and add anonbearview={handleBearView}
attribute to thec-bear-tile
tag. This allows us to capture thebearview
event that is fired by the tile component. The event is handled in ahandleBearView
function.
- Replace the contents of
bearList.js
with: Code highlights:- We import a navigation mixin that bundles utility functions dealing with navigation. A mixin lets us add functionality to a class without extending it. This is useful when a class already extends a parent class (a class can only extend a single parent).
- Our class extends the navigation mixin applied to the
LightningElement
base class. - We handle the
bearview
event in thehandleBearView
function. We extract the bear record id from the event detail and we use the navigation mixin to navigate to a bear record page.
- Deploy the updated code to the org and test that you can navigate to a bear record with the button icon on a tile.
That’s it for this step. We’ve refactored our component into two smaller components: the bear list and a bear tile. We’ve explored how to communicate from the parent list component to the child tile component with an @api
decorator. We also saw how to communicate from a child to a parent with a custom event.
In the next step, we see how to interact with other components in a Lightning page.