useState hook introduction in React - Mini Project: Build & Apply

useState Hook Introduction

📖 Scenario: You are building a simple React component that shows a counter. The counter starts at zero and can be increased by clicking a button.

🎯 Goal: Create a React functional component that uses the useState hook to keep track of a counter value and updates it when a button is clicked.

📋 What You'll Learn

Create a React functional component named Counter

Use the useState hook to create a state variable called count initialized to 0

Add a button that, when clicked, increases the count by 1

Display the current count value inside a <p> tag

💡 Why This Matters

🌍 Real World

Counters are common in apps for likes, votes, quantities, or steps. Learning useState helps you manage changing data in React components.

💼 Career

Understanding useState is essential for React developers to build interactive user interfaces that respond to user actions.

1

Create the Counter component and initial state

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

React

import React from 'react';

// Create the Counter component and useState hook here
// Your code here

Need a hint?

Remember to import useState from React and call it inside your component.

2

Add a button to increase the count

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

React

import React, { useState } from 'react';

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

Need a hint?

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

3

Display the current count value

Inside the Counter component's return, add a <p> tag that displays the current count value.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    
       setCount(count + 1)}>Increase
      {/* Add a  tag to show count here */}
    
  );
}

Need a hint?

Use curly braces inside JSX to show the count variable.

4

Export the Counter component

Add an export statement to export the Counter component as the default export.

React

import React, { useState } from 'react';

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

// Export the Counter component
// Your code here

Need a hint?

Use export default Counter; to export the component.