0

I'm getting the below error Error screenshot : 1

I'm trying to retrieve checkbox options from a child component through the parent JS but I'm getting this error. I'm new to JS and lightning so can you also explain why I'm getting this error and how to rectify them in future Attaching my codes below.

Parent component

<template>
    <lightning-card label="Call methods on Child Component">
    <lightning-input value={value} label="Checkbox Value"></lightning-input>
    <lightning-button label="Select Checkbox" onclick={checkboxSelectHandler} ></lightning-button>
    <c-public-method-child></c-public-method-child>
    </lightning-card>
</template>

Parent JS

import { LightningElement, track } from 'lwc';

export default class PublicMethodParent extends LightningElement {
    @track value;
    checkboxSelectHandler(){
        const childComponent = this.template.querySelector('c-public-method-child');
        const returnedMessage = childComponent.selectCheckbox(this.value);
        console.log('Returned Message: ', returnedMessage);
    }
}

Child component

<template>
    <lightning-checkbox-group name = "Checkbox Group"
                              label = "Marker Group"
                              options = "{options}"
                              value = "{value}" ></lightning-checkbox-group>
    <p>Selected Values are: {selectedValues}</p>
</template>

Child component jS

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

export default class PublicMethodChild extends LightningElement {
    value = ['Red'];

    options = [            
            { label: 'Red marker', value: 'Red' },
            { label: 'blue marker', value: 'Blue' },
            { label: 'green marker', value: 'green' },
            { label: 'yellow marker', value: 'yellow' },
    ];

    @api  
    selectCheckbox(checkboxValue){
        const selectedCheckbox = this.options.find(checkbox => {
            return checkboxValue === checkbox.value;
        });

        if(selectedCheckbox){
            this.value = selectedCheckbox.value;
            return "Successfully checked";
        } else {
            return "No checkbox found";
        }
    }
}
1
  • Are you sure the instance of c-public-method-child is present in DOM when you're calling checkboxselecthandler? It won't work if it is present inside any conditional template. Nov 5, 2021 at 8:08

1 Answer 1

0

You have a couple of problems with your code.

const returnedMessage = childComponent.selectCheckbox(this.value);

Data bindings in LWC are from parent to child, never the other way around. You need to handle this with an event.

<lightning-input onchange={handleChange} value={value} label="Checkbox Value"></lightning-input>

...

handleChange(event) {
  this.value = event.target.value;
}

this.value = selectedCheckbox.value;

The value here should be an Array. More than one value can be selected.

@api  
selectCheckbox(checkboxValue){
  console.log(checkboxValue)
    const selectedCheckbox = this.options.find(checkbox => {
        return checkboxValue === checkbox.value;
    });

    if(selectedCheckbox){
      let values = new Set(this.value); // Unique values only
      values.add(selectedCheckbox.value); // add uniquely
      this.value = Array.from(values); // Convert back to Array
      return "Successfully checked";
    } else {
        return "No checkbox found";
    }
}

You'll still have some more work to do from here, but this should get you unstuck. Also, remember JavaScript is cAsE-sEnSiTiVe, be careful how you're setting your values, etc.

An updated example is posted here for your convenience.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .