Display Repeating Components based on a Dynamic List

How-to Display Repeating Components based on a Dynamic List in a React Component using Quest

Use case: Display a series of Buttons, Checkboxes, Alerts, etc. based on a dynamic list of items.

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. Add the component, for example a Radio button, Label, etc, you wish to display in the Figma design. You just need to add one instance of the component.

2. Encapsulate the above component in a frame and export your design into Quest.

3. In Quest, add a Data List binding to the Frame. For the component, add the relevant bindings such as Text, onClose, onClick, etc., based on your use case.

4. Write the necessary handler code for the dynamic data list and the handler functions.

Detailed Instructions:

In this example, we’ll demonstrate how to create and display three buttons based on a dynamic list. By the end of this instruction, you should successfully render a component that looks like the below:

Step 1:

Create a simple Figma Component with one button and a frame around it. We recommend you use the button from the MUI (community or paid) kit.

Set the below properties for the frame around the LARGE button:

Turn on Auto layout and use the Advanced layout to set the spacing mode to "Space between". The goal is to make the component auto-responsive to the undetermined list of buttons the program is going to render.

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, now we need to attach the dynamic data list to the parent frame of the button. To do this, select the Frame encapsulating the button and set the List features as shown below: Populate the List attribute with your data source.

Step 4:

The next step is to set the “visible” and “text” bindings of the button. Because we will be generating the buttons dynamically, we’ll need the hooks defined to get the text of the button and also have the flexibility to either display or hide the button based on additional conditions you might have. For example, if you are going to display three fruits but your user is allergic to say Bananas, you can leverage the “visible” binding to hide the button for that specific user.

Set the “visible” binding: Set it to function fns.isTextVisible and pass the index parameter. The index parameter will be used to tie to the corresponding list item in the data list.

Set the “text” binding: Set it to function fns.getButtonText and pass the index parameter. You can name the functions per your development standards.

Step 5:

Next step is to export the code using the “Export” button as shown below:

Step 6:

When you export, Quest generates two files. One file contains everything required for the presentation layer. For example, if you named your component as Repeatbutton, then the two files generated will be “RepeatButton.js” and “useRepeatButton.js”

You should never modify the Repeatbutton.js. Doing so will result in your edits being overwritten the next time you sync the figma designs into Quest and export the component.

All your handler functions will go into the “useRepeatbutton.js”. You have full control over this file. Once you start modifying the “useRepeatbutton.js”, be sure to not override the file from future Quest exports.

Step 7:

Let’s look through some code you’ll have to add to the “useRepeatbutton.js” to achieve the desired repeating buttons:

Define the array that’ll contain your dynamic list and set the variables. Technically, you can generate this list via additional logic in your backend code. We are using this array as an example on how to create a list and iterate through it:

 const mybuttons = [
   {
     text: "Apple",
     isVisible: true
   },
   {
     text: "Banana",
     isVisible: true
   },
   {
     text: "Orange",
     isVisible: true
   },
 ];
 let [index, setindex] = useState();
 let data = { mybuttons, index };

Define the function getButtonText:

 const getButtonText = (param1) => {
   let buttonText = "";
   //console.log(param1)
   buttonText = mybuttons[param1].text;
   return buttonText;
 };

Define the function isTextVisible:

 const isTextVisible = (param1) => {
   return mybuttons[param1].isVisible;
 };

Step 8:

That’s it. Now drop the component code into your sample React app “App.js” as below and you are ready to view it. If you have the React server running on your localhost:3000, just navigate there to see the result:

import Repeatbutton from './Repeatbutton';
 
function App() {
 return (   
   <Repeatbutton />
 )
}
export default App;

Final Step 9:

Below is what you should see in the localhost:3000