Make Your Component Interactive
Essential knowledge
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson focuses on adding interactivity to the map pins. Building on the previous styling enhancements, we'll use React's
`useState`Key points
- React Hook: Learn how to use the
`useState`hook to manage the interactive state of components, such as tracking pin clicks.`useState` - Pin Click Actions: This lesson demonstrates how to implement actions that occur when a pin is clicked, enabling interactive map functionality.
- Interactive Components: This provides a practical example of making components interactive, a core concept in front-end development.
In the previous lesson, we added some styling elements to the pins. Now, let’s make these pins interactive!
Managing state is one of the things React does really well. We'll make use of the React
`useState`Watch the video below for steps on how to apply an action to a pin (or pins) once it has been clicked.
Creating Interactive Components
This video explains how to make a component interactive
