How to refer child component name in parent component LWC

Question

I have a child component folder "bCPContractTOP" which has

1. bCPContractTOP.HTML
2. bCPContractTOP.js
3. bCPContractTOP.js-meta.xml

How to call this from parent component. I am getting one error

LWC1010: Failed to resolve entry for module "bCPContractTOP".

<template>
  <div>
    <lightning-input type="text" value={checknameinputvalue} name="CheckName" label="Check Name" required onchange={handleInputChange}></lightning-input>
    <lightning-button label="Generate" title="Generate" class="slds-m-left_x-small" onclick={handleClick} ></lightning-button>
    <c-bCPContractTOP check-name={checkNameValue}></c-bCPContractTOP>
  </div>
</template>

Answer 1

Capital letters become lowercased and prefixed with a hyphen (-), so the name would become:

c-b-c-p-contract-t-o-p

Your code would look like this:

<c-b-c-p-contract-t-o-p check-name={checkNameValue}></c-b-c-p-contract-t-o-p>

This is called "kebab case" in the documentation.

For this reason, it's probably more beneficial to not use so many capital letters in your component name.

Also, the file names are case sensitive--make sure your template is bCPContractTOP.html (lowercase html).