No Time Dad

A blog about web development written by a busy dad

Understanding React Div OnClick Handlers

Understanding how to use onClick with divs in React is an important part of React development. Really, these techniques can be used with any element but div is probably the most commonly used in modern web development.

The first example of a react div onClick handler ignores the event object that is passed by default to the click handler function. This is a common pattern when you don’t need to know anything about the target element. I typically use this pattern outside of a loop when focusing on a single element. Things like submit buttons are good candidates for ignoring the event object. I just need the button something when clicked and I don’t care about the button element itself.

Click me!
import React, { useState } from 'react';

export const ColorDiv = ({ defaultStyles }) => {
  const [color, setColor] = useState('blue');

  const handleClick = () => {
    setColor(color === 'red' ? 'blue' : 'red');
  }

  return (
    <div onClick={handleClick} style={{ ...defaultStyles, backgroundColor: color }}>Click me!</div>
  );
}

This component changes the background-color css property when the div is clicked. When I call the handleClick element as I’ve done here (onClick={handleClick}), the event object is implicitly passed as the first argument to the handleClick function. I’m just ignoring it in the handleClick function because I don’t need anything from it. I could’ve written the react div onclick function like this:

const handleClick = (event) => {
  setColor(color === 'red' ? 'blue' : 'red');
}

But again, since I don’t need the event parameter I think it’s clearer to just leave it out. I might also get an unused parameter warning from eslint if I included it. Below is an example of how I could use the event to read and change the text displayed in the div. This example is a little silly because I already have the text stored in state as value, but it’s a good example on event object usage. Try clicking on the text below to see it change.

Awesome
import React, { useState } from 'react';

export const TextDivEvent = () => {
  const [value, setValue] = useState('Awesome');

  const handleClick = (event) => {
    const text = event.target.textContent;
    setValue(text === 'Awesome' ? 'Cool' : 'Awesome');
  }

  return (
    <div onClick={handleClick} style={{ ...defaultStyles }}>{value}</div>
  );
}

An important thing to note at this point is that there’s another way I can write my react div onClick handler. This way is more explicit than the previous two, but it achieves the same result. This approach is binding the function and is a common pattern to use when in a loop and multiple arguments need to be passed to the function. Especially if the arguments aren’t the event object.

<div onClick={(event) => handleClick(event)} ... > ... </div>

These examples all use react functional components instead of react class components. I tend to write most of my react components as functional components these days, especially since the introduction of react hooks. Hooks require less code. And it’s easy to create your own custom hooks. I’m not sure if I’ll ever go back to class components, and it seems like the React community in general is heading that way too.