Passing recordId from parent to child in LWC

It is a very common requirement to pass the id of the record from parent to child in LWC.

We need to make use of a property called recordId in the LWC components to hold the id of the record.

recordId is a special type of a property because LWC framework is going to strip the ID from the URL (if it exists) and pushes it to the property recordId.

We only have to create the property with the name recordId and we don't have to write the logic to strip the id of the record from the URL and push it to the property it's done automatically.

There is a catch, we need to make sure the property is annotated with @api annotation. That's how the property becomes public and data will be pushed to the property by the framework.

That's not it, by some means if my component (parent component) get's access to a specific record id and if I want to push it to one of the child components we can also push it.

It's not a mandate that id of the record only has to be pushed by the framework to the property @api recordId.

Let's look at the snippet that shows us how to push the record id to the property in the child component.

This is the child component

import { LightningElement } from 'lwc';

export default Class ExploreProps extends LightningElement{
    @api
    recordId;

}

This is how we will be pushing the id of the record to the property recordId from the parent component.

<template>
    <c-explroe-props record-id="001XXXXXX"></c-explore-props>
</template>

Notice the attribute record-id and it's not recordId.

Hope this was helpful!