Event Handling & Conditional Rendering in React

This article is part of the "Mastering React with Next.js: A Developer's Guide" series. In our previous article, "Understanding Components, Props, and State Management in React," we explored the foundational concepts that make React such a powerful library for building user interfaces. We learned how components act as the building blocks of your application, how props enable data sharing between components, and how state lets you manage dynamic data within your app. If you haven’t checked it out yet, it’s a must-read for grasping React basics.

Now, let’s build on that foundation by diving into how React handles events and renders content conditionally. These two concepts are at the heart of building user-friendly interfaces. In this article, we’ll walk through how React handles events, how to render components conditionally, and how you can put these concepts to work in your projects.

Handling Events in React

React’s approach to event handling is similar to plain JavaScript but with a few important differences. Here’s what you need to know:

The Basics

1. Use camelCase: React uses camelCase for event names, like onClick instead of onclick.

2. Synthetic Events: Events in React are wrapped in a cross-browser wrapper called synthetic events, which ensures your code works the same across different browsers.

3. Passing Arguments: You can easily pass arguments to event handlers using arrow functions or the bind method.

Example: Click Event

Let’s start with a simple example:

import React from "react";

function ClickButton() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => handleClick("Button Clicked!")}>Click Me</button>
  );
}

export default ClickButton;

Here, we use an arrow function to pass a custom message to the handleClick function when the button is clicked.

Handling Multiple Events

You can also attach different event handlers to different elements. Here’s an example:

function MultiEventHandler() {
  const handleMouseEnter = () => {
    console.log("Mouse entered");
  };

  const handleMouseLeave = () => {
    console.log("Mouse left");
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ padding: "20px", backgroundColor: "lightblue" }}
    >
      Hover over this box
    </div>
  );
}

This code logs different messages to the console depending on whether the mouse enters or leaves the box.

Conditional Rendering in React

Conditional rendering lets you show or hide parts of your UI based on certain conditions, like user interaction or application state. React offers a few ways to handle this.

Using if Statements

The simplest way is to use an if statement:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

Using Ternary Operators

For shorter logic, you can use a ternary operator:

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>;
}

Using the && Operator

If you want to conditionally display something without an else case, the logical && operator is handy:

function Notification({ hasUnreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {hasUnreadMessages && <p>You have unread messages.</p>}
    </div>
  );
}

This only shows the message if hasUnreadMessages is true.

Putting It All Together

Here’s an example combining event handling and conditional rendering:

import React, { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn((prevState) => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? "Welcome Back!" : "Please Log In"}</h1>
      <button onClick={toggleLogin}>
        {isLoggedIn ? "Log Out" : "Log In"}
      </button>
    </div>
  );
}

export default LoginToggle;

In this example, clicking the button toggles the isLoggedIn state, which updates the greeting and button text accordingly.

Tips for Success

1. Keep Handlers Simple: If your event logic is complex, move it to a separate function to keep your components clean.

2. Avoid Excessive Inline Functions: Inline functions are fine in moderation, but for frequently updated components, they can impact performance.

3. Descriptive Names: Use clear, descriptive names for your event handlers and state variables.

4. State Management: Use state effectively to control your conditional rendering logic.

Stay Connected

Want more React tips and tutorials? Here’s how you can stay in the loop:

• Subscribe to my Newsletter

• Follow me on Facebook and LinkedIn

• Explore more articles on Schibelli.dev

Subscribing is the easiest way to stay ahead and get exclusive insights to help you become a React pro. Let’s build something amazing together!