Mapping an array

Dynamically rendering content is crucial for building interactive UIs. JSX.Design simplifies this process, enabling you to map arrays to components like lists, tables, or grids. Whether it's rendering a product catalogue or user profiles, JSX.Design makes dynamic rendering seamless.

How to Map an Array

Step 1: Create a layout

• Design your canvas with a structure to render repeated elements (e.g., a list of items).

• For better reusability, consider converting the list item into a custom component. Learn more about custom components.

Note: Array mapping can also be applied to regular components.

Step 2: Enable array mapping

• Choose the parent div that contains the components to be repeated.

• Ensure it has only one nested component inside.

• On the Style tab, under Div Options, enable array.map

• Set a test count to preview how many items the array should render (e.g., 4).

• Specify the array source as a prop, e.g., props.movielist

Step 3: Connect array source in code

Go back to your IDE. Inside the canvas-file tag, map the array. For example, let's say your JSX.Design canvas is named 'auth'

<AuthUI movielist={array} />

Step 4: Link components to array

For example, you want to link the below array to a list with a title and genre for each list item.

const movies = [
  { title: "Inception", genre: "Sci-Fi" },
  { title: "The Dark Knight", genre: "Action" },
  { title: "Interstellar", genre: "Sci-Fi" },
  { title: "Dunkirk", genre: "War" },
];

Here's how you can do it:

Regular Component

• Select an element inside the list (e.g., the title).

• Navigate to the Typography panel, and replace the text with:

{item.title}

• Similarly, for another element (e.g., description), use:

{item.description}

Custom Component

• Right click to edit the custom component in the JSX.Design editor.

• Select an element inside the list (e.g., the title).

• Navigate to the Typography panel, and replace the text with:

{props.item.title}

• Similarly, for another element (e.g., description), use:

{props.item.description}

If you’re not using a custom component, simply use item.title or item.genre without mentioning props.

Previewing the results

While you won’t see the mapped data in the JSX.Design editor, the rendered output will display the data in your React application.

---

Tips for Array Mapping

• Dynamic Previews: Use the test count feature in JSX.Design to approximate how the final layout will appear.

• Custom Components: Always prefix props when mapping data in custom components to ensure proper binding.

---

Next Steps:

Congratulations! You've mastered the basics. Ready to deep-dive to more advanced features?