Inline vs function handlers in React - Hands-On Comparison

Inline vs Function Handlers in React

📖 Scenario: You are building a simple React button component that counts how many times it is clicked. You want to learn the difference between using inline event handlers and function event handlers.

🎯 Goal: Create a React component that shows a button and a count. First, set up the initial state. Then, add a configuration variable for the increment step. Next, implement the click handler using a function. Finally, add a second button that uses an inline click handler to increase the count.

📋 What You'll Learn

Use React functional components with hooks

Create a state variable called count initialized to 0

Create a constant step set to 1

Create a function handler called handleClick that increases count by step

Add a button that uses handleClick as its onClick handler

Add a second button that uses an inline arrow function to increase count by step

💡 Why This Matters

🌍 Real World

Buttons with click handlers are everywhere in web apps. Knowing how to write handlers inline or as functions helps you write cleaner and more efficient React code.

💼 Career

React developers often need to manage user interactions. Understanding event handlers is essential for building interactive user interfaces.

1

Set up the initial 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 configuration variable

Inside the Counter component, create a constant called step and set it to 1.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // Create a constant step set to 1
  // Your code here
}

Need a hint?

Just add const step = 1; inside the Counter function.

3

Create a function click handler

Inside the Counter component, create a function called handleClick that increases count by step using setCount. Then, add a button with the text Increment that uses handleClick as its onClick handler. Also, display the current count in a <p> tag.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const step = 1;

  // Create function handleClick to increase count by step
  // Add a button with onClick={handleClick} and text 'Increment'
  // Display count in a  tag
  // Your code here
}

Need a hint?

Define handleClick as a function that calls setCount(count + step). Return JSX with a <p> showing count and a button using onClick={handleClick}.

4

Add a button with inline click handler

Inside the Counter component's return statement, add a second button with the text Inline Increment. Use an inline arrow function for its onClick handler that increases count by step using setCount.

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const step = 1;

  function handleClick() {
    setCount(count + step);
  }

  return (
    
      Count: {count}
      Increment
      {/* Add second button with inline onClick handler here */}
      {/* Your code here */}
    
  );
}

Need a hint?

Add a button with onClick={() => setCount(count + step)} and text Inline Increment.