Click Counter Basics | CodeSignal Learn

Click Counter Basics | CodeSignal Learn

Introduction: Tracking User Actions in Mobile Apps

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.

Understanding State in React Native

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.

Using the useState Hook

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: TypeScript import React, { useState } from "react"; import { Text } from "react-native"; const ClickCounter = () => {const [count, setCount] = useState(0); return <Text>Count: {count}</Text>;}; 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.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Event Handlers: Responding to Button Presses

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: import React, { useState } from "react"; import { View, Text, Button } from "react-native"; const ClickCounter = () => {const [count, setCount] = useState(0); const handleClick = () => {setCount(count + 1);}; return (<View> <Text>Count: {count}</Text> <Button title="Click Me" onPress={handleClick} /> </View>);}; 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.

Building a Click Counter: Step-by-Step Example

Let’s put it all together and build a complete click counter, including a reset feature. Here’s a more complete example: import React, { useState } from "react"; import { View, Text, Button, TouchableOpacity } from "react-native"; const ClickCounter = () => {const [count, setCount] = useState(0); const handleClick = () => {setCount(count + 1);}; const handleReset = () => {setCount(0);}; return (<View> <Text>Count: {count}</Text> <Button title="Click Me" onPress={handleClick} /> <TouchableOpacity onPress={handleReset}> <Text>Reset</Text> </TouchableOpacity> </View>);}; 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.

TypeScript

import React, { useState } from "react";
import { View, Text, Button } from "react-native";

const ClickCounter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Click Me" onPress={handleClick} />
    </View>
  );
};

TypeScript

import React, { useState } from "react";
import { View, Text, Button, TouchableOpacity } from "react-native";

const ClickCounter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  const handleReset = () => {
    setCount(0);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Click Me" onPress={handleClick} />
      <TouchableOpacity onPress={handleReset}>
        <Text>Reset</Text>
      </TouchableOpacity>
    </View>
  );
};