How-to Pass Values from Parent to Nested Components

Use case: Pass values from parent to child components

TL;DR: Here are some high-level steps on how to do this. Look in the next section if you are looking for detailed instructions:

1. Create a component with a simple element such as an Alert. Define the “text” and “visible” bindings and set the values to default from props such as props.alertText and props.isVisible. Define these props at the component level.

2. Embed the component created in step 1 into another component i.e. parent component.

3. In the parent component, add the “Nested Prop Values” binding to pass the values from the parent to the child component.

Detailed Instructions: In this example, we’ll demonstrate how to nest a component under a parent component and pass values to the child component from the parent.

Step 1:

Create a simple Figma Component with one Alert and a frame around it. We recommend you use the button from the MUI (community or paid) kit. This will be the child component that’ll be nested in another component.

Step 2:

Invoke the Quest plugin from within Figma, and Export the Component in Quest. When done, click on the “View in Quest” button to see the component in Quest.

Step 3:

In the Quest editor, set the “text” and “visible” bindings as below on the Alert component:

Step 4:

The next step is to define the props at the Component level as below. If you like, you can define a default value for cases where there is no value passed from the parent component.

Step 5:

We are now done with the Child Component. Now let’s create the parent component in Figma as shown below. Make it a simple frame and copy the Child Component into this frame as shown below:

Step 6:

Invoke the Quest plugin from within Figma, and Export the Parent Component into Quest. When done, click on the “View in Quest” button to see the component in Quest.

Step 7:

In the Quest Editor, set the Nested Prop Values binding as shown below. Essentially, we are passing the values to the child component through this binding:

alertText={"Hello text from passed from the Parent component"} isVisible={true}

Step 8:

Next step is to export the code using the “Download” button as shown below for both the Parent and the Child Component. You can also download the entire App if you prefer.

Final Step 9:

Drop the generated code into your local react environment and test it out. You should see something like below.