Welcome to the second lesson of the "Introduction to Props and Event Handlers in React Native" course! In our previous lesson, we explored the basics of props — how to pass data from parent to child components to create flexible and reusable UIs. Now, we’re shifting our focus from static data to dynamic user interaction.

In real-world mobile apps, responding to user actions is essential. Whether it’s counting likes, tracking steps, or updating notifications, apps need to react to what users do. In this lesson, you’ll learn how to track and respond to user actions by building a simple click counter. This will introduce you to the concepts of state and event handling in React Native, which are foundational for creating interactive mobile experiences.

Before we dive into building our click counter, let’s talk about state. In React Native, state is a way for a component to remember information between renders. Unlike props, which are passed in from a parent, state is managed within the component itself.

For example, if you want a button to keep track of how many times it’s been pressed, you need a place to store that number. That’s where state comes in. When the state changes, React Native automatically updates the UI to reflect the new value.

This is different from what you learned about props in the previous lesson. Props are for passing data into a component, while state is for data that changes inside a component.

To manage state in a functional component, React Native provides the useState hook. This hook lets you declare a state variable and a function to update it.

Here’s a minimal example of how to use useState to track a count:

In this example, useState(0) creates a state variable called count and a function called setCount to update it. The initial value is 0. Every time setCount is called, the component re-renders with the new value of count.

This is the foundation for making your app respond to user actions.

Now that you know how to store and update state, let’s make the app respond to user input. In React Native, you use event handlers — functions that run when a user interacts with a component, like pressing a button.

Here’s how you can add a button that increases the count when pressed:

In this code, the handleClick function is called every time the button is pressed. It updates the state by increasing the count by one. React Native then re-renders the component, and the new count is displayed.

This pattern — defining an event handler and connecting it to a UI element — is how you make your app interactive.

Let’s put it all together and build a complete click counter, including a reset feature. Here’s a more complete example:

Here’s what’s happening:

• The count state variable keeps track of how many times the button has been pressed.
• The handleClick function increases the count by one each time the "Click Me" button is pressed.
• The handleReset function sets the count back to 0 when the "Reset" text is pressed.
• The UI updates automatically whenever the state changes.

This simple example demonstrates how state and event handlers work together to create interactive components in React Native.

In this lesson, you learned how to use state and event handlers to make your React Native components interactive. You saw how the useState hook lets you store and update information, and how event handlers respond to user actions like button presses. These concepts are essential for building dynamic mobile apps.

You’re now ready to practice what you’ve learned by building your own click counter and experimenting with state and event handling in the exercises that follow. This hands-on experience will help solidify your understanding and prepare you for even more advanced topics in React Native. Good luck, and have fun coding!