Updating phase in React - Mini Project: Build & Apply

React Component Updating Phase

📖 Scenario: You are building a simple React counter component that updates its displayed number when a button is clicked.This simulates a real-world situation where a user interacts with a webpage and the content changes dynamically.

🎯 Goal: Create a React functional component that shows a number starting at 0 and a button labeled 'Increase'. When the button is clicked, the number increases by 1 and the component updates to show the new number.

📋 What You'll Learn

Use React functional components

Use the useState hook to manage the counter state

Add a button that updates the state when clicked

Display the current counter value in a <div>

💡 Why This Matters

🌍 Real World

Counters are common in apps for likes, votes, quantities, or steps. Understanding how to update components on user actions is essential.

💼 Career

React developers frequently use state and event handlers to create interactive UI components that update dynamically.

1

Set up the initial counter state

Create a React functional component called Counter. Inside it, use the useState hook to create a state variable called count initialized to 0.

React

import React, { useState } from 'react';

function Counter() {
  // Create state variable count with initial value 0
  // Your code here
}

Need a hint?

Use const [count, setCount] = useState(0); inside the Counter function.

2

Add a button to increase the counter

Inside the Counter component, add a <button> element with the text 'Increase'. Add an onClick handler that calls setCount(count + 1) to increase the count by 1.

React

import React, { useState } from 'react';

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

Need a hint?

Return a button element with an onClick that calls setCount(count + 1).

3

Display the current count

Modify the Counter component to display the current count inside a <div> above the button.

React

import React, { useState } from 'react';

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

Need a hint?

Use a <div> to show the count value above the button.

4

Complete the component with export

Add export default Counter; at the end of the file to make the Counter component usable in other parts of the app.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
      {count}
       setCount(count + 1)}>Increase
    
  );
}
// Export the Counter component
// Your code here

Need a hint?

Write export default Counter; at the end of the file.