React Native Academy · Lesson

Building an Interactive Counter App

Combine props and state to build a counter component with increment, decrement, and reset buttons that update the UI reactively.

Counter App Project Plan

This lesson builds a complete interactive counter app that applies all concepts learned in this course: props for passing data, useState for managing the count, lifted state for sharing between sibling components, and StyleSheet for visual polish. The app will have a display component that shows the current count, three control buttons (Increment, Decrement, Reset), a history log of recent changes, and a step-size selector to change how much each button increments. Planning the component structure before coding prevents confusion.

// Component tree for the Counter App:
// App
// ├── CountDisplay        ← shows current count (receives count prop)
// ├── CountControls       ← increment/decrement/reset buttons
// │   └── ControlButton   ← reusable button component
// ├── StepSelector        ← choose step size (1, 5, 10)
// └── HistoryLog          ← list of recent operations

Setting Up App State

The App (or screen) component owns all the state: the current count, the step size, and the history log. Because CountDisplay, CountControls, and HistoryLog are siblings that all need different aspects of this state, lifting it to the parent is correct. The history is an array of strings (operation descriptions) that grows with each action. Using a single parent to own all state keeps the logic centralized and easy to follow.

import { useState } from 'react';

export default function CounterApp() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  const [history, setHistory] = useState([]);

  function addHistory(message) {
    setHistory(prev => [message, ...prev].slice(0, 10)); // keep last 10
  }

  function increment() {
    setCount(prev => prev + step);
    addHistory(`+${step} → ${count + step}`);
  }

  function decrement() {
    setCount(prev => prev - step);
    addHistory(`-${step} → ${count - step}`);
  }

  function reset() {
    setCount(0);
    addHistory('Reset → 0');
  }

  return null; // UI rendered below
}

All lessons in this course

← Back to React Native Academy