I am trying to send the related contact records with the Account object from Parent component(lightning datatable). Whenever I am clicking on any name of Account object the related contact and opportunity records should be visible at child lightning datatable.

After clicking on name I am getting error, I am unable to show related contact and opportunity at child datatble. Could you please help me to do this.

 Parent HTML:

<template>

    <lightning-card title="Account Records" icon-name="standard:action_list_component"> <br/>

        <template if:true={accounts}>

        <div style="width: auto;">

                <h1>Account Details</h1>

                <lightning-datatable data={accounts} columns={column}

                    key-field="Id" hide-checkbox-column="true"

                    onrowaction={handleRowAction}>

                </lightning-datatable>

        </div>

    </template>

    <c-Show-Related-Con-And-Opp-Component record-id={recordId}></c-Show-Related-Con-And-Opp-Component>

    <c-Toast-Message-Component></c-Toast-Message-Component>

</lightning-card>

</template>

Parent.JS:

import { LightningElement, track, wire } from 'lwc';

import getAccount from '@salesforce/apex/GetAccountFromLWC.getAccount'

const columns = [

    { label: 'Name', fieldName: 'Name', type:'url',

    typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' }},

    { label: 'AccountNumber', fieldName: 'AccountNumber', type: 'text'},

    { label: 'Type', fieldName: 'Type', type:'text' },

    { label: 'Phone', fieldName: 'Phone', type: 'Phone' },

 ];

export default class AccountDatatableComponent extends LightningElement {

    @track accounts = [];

    column=columns;

    @track recordId;

    @track error;

    oppList;

    conList;

    @wire(getAccount)

    wiredAccounts({ error, data }) {

        if (data) {

            this.accounts = data;

            this.error = null;

        } else if (error) {

            this.error = error;

            this.accounts = [];

        }

    }

    handleRowAction(event){

        this.recordId = event.detail.row.Id; 

    }

}

Child HTML:

<template>

    <lightning-card title="Related Contact and Opportunity Records" icon-name="standard:action_list_component"> <br/>

        <template if:true={conList}>

        <div style="width: auto;">

                <h1>Account Details</h1>

                <lightning-datatable data={conList} columns={conColumns}

                    key-field="Id" hide-checkbox-column="true"

                    onrowaction={handleRowAction}>

                </lightning-datatable>

        </div>

    </template>

    <template if:false={conList}>

        No Records Found

    </template>

    <template if:true={oppList}>

        <div style="width: auto;">

                <h1>Account Details</h1>

                <lightning-datatable data={oppList} columns={oppColumns}

                    key-field="Id" hide-checkbox-column="true"

                    onrowaction={handleRowAction}>

                </lightning-datatable>

        </div>

    </template>

    <template if:false={oppList}>

        No Records Found

    </template>

    </lightning-card>

</template>

Child JS:

import { api, LightningElement, track, wire } from 'lwc';

import getRelatedContact from '@salesforce/apex/GetAccountFromLWC.getRelatedContact'

import getRelatedOpportunity from '@salesforce/apex/GetAccountFromLWC.getRelatedOpportunity'

const conColumns=[

    { label: 'Name', fieldName: 'Name', type:'url',

    typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' }},

    { label: 'Lead Source', fieldName: 'LeadSource', type:'text' },

    { label: 'Phone', fieldName: 'Phone', type: 'Phone' }

];

const oppColumns=[

    { label: 'Name', fieldName: 'Name', type:'url',

    typeAttributes: { label: { fieldName: 'Name' }, target: '_blank' }},

    { label: 'Amount', fieldName: 'Amount', type:'currency' },

    { label: 'Close Date', fieldName: 'CloseDate', type: 'date' },

    { label: 'Stage Name', fieldName: 'StageName', type: 'text' }

];

export default class ShowRelatedConAndOppComponent extends LightningElement {

    @api conList;

    @api oppList;

    oppColumn=oppColumns;

    conColumn=conColumns;

    @api recordId;

    @wire (getRelatedContact,{accId:'$recordId'}) conList;

    @wire (getRelatedOpportunity, {accId:'$recordId'}) oppList;

}