Why state and props drive component behavior in React Native - Build It to Prove It

Build: Counter Screen

A simple screen that shows a number and two buttons to increase or reset it. It demonstrates how state and props control what the user sees and how the app reacts.

Target UI

-------------------
|   Counter App   |
|                 |
|      0          |
|                 |
|  [+]    [Reset] |
-------------------

Display a number starting at 0

A '+' button that increases the number by 1 when pressed

A 'Reset' button that sets the number back to 0

Use state to keep track of the number

Use props to pass the number to a child component that displays it

Starter Code

React Native

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

function NumberDisplay(props) {
  // TODO: Show the number passed via props
  return (
    <Text style={styles.numberText}>0</Text>
  );
}

export default function CounterScreen() {
  // TODO: Create state for the number

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      {/* TODO: Use NumberDisplay and pass the number as prop */}
      <View style={styles.buttons}>
        {/* TODO: Add '+' button to increase number */}
        {/* TODO: Add 'Reset' button to reset number to 0 */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  numberText: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

function NumberDisplay(props) {
  return (
    <Text style={styles.numberText}>{props.number}</Text>
  );
}

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <NumberDisplay number={count} />
      <View style={styles.buttons}>
        <Button title="+" onPress={() => setCount(count + 1)} />
        <Button title="Reset" onPress={() => setCount(0)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  numberText: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

This app uses state to keep track of the current number shown on screen. The count variable is created with useState(0), starting at zero.

The NumberDisplay component receives the current number as a prop called number. This means it shows whatever value the parent CounterScreen gives it.

When the '+' button is pressed, the setCount function updates the state by adding 1. React then re-renders the screen, passing the new number down to NumberDisplay, so the displayed number changes.

The 'Reset' button sets the count back to zero, showing how changing state updates the UI automatically.

This example shows how state holds data that can change inside a component, and props pass data from parent to child components, driving what the user sees and how the app behaves.

Final Result

Completed Screen

-------------------
|   Counter App   |
|                 |
|      0          |
|                 |
|  [+]    [Reset] |
-------------------

Tapping '+' increases the number by 1 each time

Tapping 'Reset' sets the number back to 0

Stretch Goal

Add a button to decrease the number by 1 but never below 0

💡 Hint

Add a new button with onPress that calls setCount(Math.max(0, count - 1))