2

I currently have two components that are functioning independently from one another. I would like to place one of the components within the other to allow them to appear as one component but be managed independently from one another. I am not currently passing any variables/values from one component to another. I am having difficulty displaying the 'child' component.

Here is the 'Parent' Component:

<template>
<lightning-card value={recordId}>

    <div class="slds-grid slds-gutters">

        <div class="slds-col slds-size_3-of-3">

            <!-- Progress Bar -->
            <lightning-progress-indicator current-step={currentStage} type="path" variant="base">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>

        </div>

        <div class="slds-col slds-size_3-of-3">
            <c-lwc-edit-form></c-lwc-edit-form>
        </div>

    </div>

</lightning-card>

ABOVE, I am referencing the child component here: <c-lwc-edit-form></c-lwc-edit-form>. My understanding is that this would display that component. The components name is actually 'lwcEditForm '.html/.js... (name is just for testing purposes). This looks correct per the documentation, In current state I have no intention of passing values/variables.

Possible Issues/Questions:

  1. Do I have to import anything into the 'Parent' Component?
  2. Or Export anything from the 'Child
  3. Am I perhaps referencing the component incorrectly?

RESPONSE/UPDATE:

I updated the 'Parent' HTML to test your response:

<template>
<lightning-card value={recordId}>

    <div class="slds-grid slds-wrap slds-gutters">

        <!-- <div class="slds-col slds-size_3-of-3">

            <lightning-progress-indicator current-step={currentStage} type="path" variant="base">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>

        </div> -->

        <div class="slds-col slds-size_3-of-3">
            <c-lwc-edit-form></c-lwc-edit-form>
        </div>

    </div>

</lightning-card>

It is still now showing the child component - these are the updates I made:

  • I updated the parent div class recommended
  • I commented out the 'Progress Bar' functionality and am attempting to only show the 'Child' Component - no dice, nothing is showing.
1
  • Does the child need access to the recordId? If so, make sure to pass this down explicitly as an attribute to the child.
    – Phil W
    Mar 31 '20 at 17:17
2

Do I have to import anything into the 'Parent' Component?

No.

Or Export anything from the 'Child

Just the default export:

export default class LwcEditForm extends LightningElement {
  ...

Am I perhaps referencing the component incorrectly?

Not as far as I can tell.

Your main problem is that you're referencing a SLDS grid with a total size of 6/3 (200% width). You need to add slds-wrap to get the component to appear on the next grid line.

<div class="slds-grid slds-wrap slds-gutters">
4
  • I made a couple of updates to test this out. I updated the parent div with the suggested classes and i commented out the progress bar functionality in the parent component. That did not work - you can see updated code/ in the question.
    – Max
    Mar 31 '20 at 17:23
  • @Max Any errors on the dev console? There's no inherent reason why this shouldn't be working based on the parent's code.
    – sfdcfox
    Mar 31 '20 at 19:01
  • As asked on the question, does the child need the recordId because if it does you must pass it in via an attribute on the child component element.
    – Phil W
    Mar 31 '20 at 21:03
  • @sfdcfox There are no errors - would a more comprehensive list of the code be helpful?
    – Max
    Mar 31 '20 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.