Updating state in React - Mini Project: Build & Apply

Updating State in React

📖 Scenario: You are building a simple React component that tracks how many times a button is clicked. This is like counting how many times you press a button on a game controller.

🎯 Goal: Create a React functional component that shows a number starting at zero and a button. Each time the button is clicked, the number increases by one.

📋 What You'll Learn

Use React functional components

Use the useState hook to create and update state

Display the current count in a <div>

Add a button that updates the count when clicked

💡 Why This Matters

🌍 Real World

Counting clicks or user interactions is common in web apps, like tracking likes, votes, or steps in a process.

💼 Career

Understanding how to update state in React is essential for building interactive user interfaces in modern web development jobs.

1

Set up initial state with useState

Create a React functional component called ClickCounter. Inside it, use the useState hook to create a state variable called count with the initial value 0. Also create the state updater function called setCount.

React

import React, { useState } from 'react';

function ClickCounter() {
  // Use useState to create count and setCount
  // Your code here
}

Need a hint?

Remember to import useState from React. Use array destructuring to get count and setCount from useState(0).

2

Add a button to update the count

Inside the ClickCounter component, add a <button> element. Set its onClick attribute to a function that calls setCount(count + 1) to increase the count by one when clicked.

React

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  // Add a button with onClick to update count
  // Your code here
}

Need a hint?

Use an arrow function inside onClick to call setCount(count + 1).

3

Display the current count

Modify the ClickCounter component to display the current count inside a <div> above the button. Show the text exactly as Count: {count}.

React

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    
      {/* Display count here */}
      {/* Your code here */}
       setCount(count + 1)}>Click me
    
  );
}

Need a hint?

Use curly braces {count} inside JSX to show the current count.

4

Add accessibility and export the component

Add an aria-label attribute to the <button> with the value Increment count for accessibility. Then export the ClickCounter component as the default export.

React

import React, { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    
      Count: {count}
       setCount(count + 1)} aria-label="Increment count">Click me
    
  );
}

// Export the component
// Your code here

Need a hint?

Use aria-label on the button for screen readers. Use export default ClickCounter; to export.