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))

Practice

1. What is the main role of state in a React Native component?

easy

A. To define the component's layout structure

B. To pass data from a parent component to a child component

C. To style the component with CSS-like rules

D. To hold data that can change over time inside the component

Solution

1. Step 1: Understand what state represents

   State is used to store data that can change during the life of a component, like user input or toggles.

2. Step 2: Differentiate state from props

   Props are for passing data from parent to child, not for internal changes.

3. Final Answer:

   To hold data that can change over time inside the component -> Option D

4. Quick Check:

   State = internal changing data [OK]

Hint: State holds changing data inside component [OK]

Common Mistakes:

• Confusing state with props
• Thinking state is for styling
• Believing state is static

2. Which of the following is the correct way to define a state variable using React hooks in a functional component?

easy

A. var count = useState(0);

B. let count = useState(0);

C. const [count, setCount] = useState(0);

D. state = { count: 0 };

Solution

1. Step 1: Recall React hook syntax for state

   useState returns an array with the current value and a function to update it, usually destructured.

2. Step 2: Check each option

   const [count, setCount] = useState(0); correctly uses array destructuring with useState. Others misuse syntax or do not destructure.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option C

4. Quick Check:

   useState with destructuring = correct [OK]

Hint: useState returns [value, setter] array [OK]

Common Mistakes:

• Not destructuring useState result
• Using var or let instead of const
• Assigning useState directly to a variable

3. Consider this React Native component code:

function Greeting(props) {
  return Hello, {props.name}!;
}

function App() {
  return ;
}

What will be displayed on the screen?

medium

A. Hello, Alice!

B. Hello, name!

C. Hello, !

D. Error: props not defined

Solution

1. Step 1: Understand how props work in this example

   The Greeting component receives name as a prop from App with value "Alice".

2. Step 2: Check the rendered output

   The component returns Hello, {props.name}! which becomes "Hello, Alice!" on screen.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Props pass data = Hello, Alice! [OK]

Hint: Props pass data from parent to child [OK]

Common Mistakes:

• Assuming props is undefined
• Ignoring the passed name value
• Confusing props with state

4. What is wrong with this React Native code snippet?

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {count}
       count = count + 1} />
    
  );
}

medium

A. You cannot assign directly to the state variable; must use setCount

B. Button component does not have a title prop

C. useState is not imported

D. Text component cannot display numbers

Solution

1. Step 1: Identify how state updates should happen

   State variables are read-only; to change state, use the setter function like setCount.

2. Step 2: Check the onPress handler

   The code tries to assign directly to count, which is invalid and won't update the UI.

3. Final Answer:

   You cannot assign directly to the state variable; must use setCount -> Option A

4. Quick Check:

   State updates require setter function [OK]

Hint: Always use setter to update state, never assign directly [OK]

Common Mistakes:

• Trying to change state variable directly
• Forgetting to import useState
• Misusing Button props

5. You want a component to show a message that changes when a button is pressed. Which approach correctly uses state and props to achieve this?

function Message({ initial }) {
  const [text, setText] = useState(initial);
  return (
    
      {text}
       setText('Updated!')} />
    
  );
}

function App() {
  return ;
}

hard

A. This fails because Button cannot change state

B. This works because state holds the message and props provide the initial value

C. This fails because props cannot be used inside useState

D. This fails because Text cannot display state variables

Solution

1. Step 1: Analyze how props and state are used

   The component receives an initial message via props and stores it in state for changes.

2. Step 2: Check the button's onPress behavior

   Pressing the button calls setText to update the state, which updates the displayed message.

3. Final Answer:

   This works because state holds the message and props provide the initial value -> Option B

4. Quick Check:

   Props initialize state; state changes update UI [OK]

Hint: Use props for initial data, state for changes [OK]

Common Mistakes:

• Thinking props can change after initial render
• Trying to update props directly
• Assuming Button can't trigger state changes