Adding Nested (Child) Components
Essential knowledge
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson combines adding map pins with the concept of nested components. Building on the Google Map integration, we'll show how to dynamically add pins (child components) to the map (parent component). This is crucial for visualizing location data and illustrates building complex, modular UIs using nested components. You'll learn how to place markers representing locations and how this parent-child relationship contributes to organized, reusable UI elements.
Key points
- Nested Component Structure: This lesson emphasizes the use of nested components to create more organized and reusable UI elements.
- Parent-Child Relationship: We'll explore how parent components can manage and interact with their child components, such as adding pins (child) to a map (parent).
- Dynamic Pin Placement: This lesson focuses on adding pins to the map, enabling you to visually represent data points or locations.
- Data Visualization: Adding pins to the map allows for the visualization of location-based data, a key aspect of many applications, including the product availability map we are building.
Watch the video below to learn how to add pins to the Google map that you created in the previous lesson.
Using Nested Components
This video explains how to add pin (nested/child components) to the map (parent component)
