Increment and decrement

Add increment and decrement buttons.

Increment and decrement functions

To change the counter we will define two functions: increment adds one to the number, decrement subtracts one. These functions call setCount.

Example: function increment() { setCount(count + 1); }. Here count + 1 is passed as the new value to setCount.

We define the functions inside the App component, before return. This way they can access count and setCount.

Function definition

Defining a function inside the component lets it access count and setCount. This comes from React's closure behavior.

Definitions: function increment() { setCount(count + 1); } and function decrement() { setCount(count - 1); }.

We are not calling these functions yet; in the next lesson we will wire them to buttons. For now we just add the definitions.

Exercise Add the functions

Add the increment and decrement functions to the existing App component. increment calls setCount(count + 1), decrement calls setCount(count - 1). Define the functions before return.

Show example solution

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

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

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return (
    <View>
      <Text>Counter: {count}</Text>
    </View>
  );
}

Test yourself

Match the functions

increment

Adds one
decrement

Subtracts one
setCount

Setter
count + 1

Increment amount

increment body

function increment() {
  ____;
}

Show answer

function increment() {
  setCount(count + 1);
}

What should the decrement function do?
- setCount(count + 1)
- decrement(count)
- count - 1
- setCount(count - 1)
Show answer

setCount(count - 1) — decrement subtracts one from the number.

Next lesson: TouchableOpacity

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies