LWC Exchange – Scenario 3

Conditional Show/Hide of Lightning Input in Child from Parent

In this LWC scenario, We are going to work on conditional rendering on Lightning Input fields in child component from parent component using a picklist field.

This problem statement has been designed for developer who are beginners in Lightning Web Component.

Problem Statement

1. Create a parent component which has a picklist field. The picklist will have three option:-
   • Show Input 1
   • Show Input 2
   • Show Input 3
2. Create a child component which has three input field with label:-
   • Name
   • Phone
   • Email
3. If users select Show Input 1, Only Name input in child component should be visible
4. If Users select Show Input 2, Only Phone input in child component should be visible
5. If Users select Show Input 3, Only Email input in child component should be visible

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.