Double Click to Edit Text in ReactJS

This article will use a simple React project to show you how to click (or double-click) to edit a page’s text.

Here is a demo of the full-name bio app we will build:

http://localhost:3000

Play

Note

This tutorial’s project is intentionally very basic to avoid confusing you with unnecessary concepts.

Without any further ado, let’s get started with the system requirements.

Get the Right Node and NPM Version

Ensure your system has Node 18.18 (or greater) and NPM 10.9 (or greater) installed.

Tip

Use the package manager tutorial to install, update, or verify Node and NPM on your system.

Create a New React App

Use the create-next-app package to create a new React app.

npx create-next-app@latest

Note

The choice of NextJS is purely random. The concept of this tutorial applies to other React applications such as Astro, Vite, and Gatsby. In other words, don’t worry if you are unfamiliar with Next.js. We will only use its basic features to learn how to click (or double-click) to edit a page’s text. So, relax—you are in good hands. 😊

After running the above command, Next will ask the following questions:

• Ok to proceed? (y) Enter the y key on your keyboard to proceed.
• What is your project named? You can name it anything you wish—for instance, click-text-to-edit-project-001.
• Would you like to use TypeScript with this project? » No / Yes Select No, as we will use plain JavaScript in this tutorial.
• Would you like to use ESLint with this project? » No / Yes Select No as we do not wish to use ESLint in this tutorial.
• Would you like to use Tailwind CSS with this project? » No / Yes Select No as we do not wish to use Tailwind CSS in this tutorial.
• Would you like to use src/ directory with this project? » No / Yes Select No as we do not wish to use the src/ directory in this tutorial.
• Use App Router (recommended)? » No / Yes Select Yes as we are ok using Next’s App router configurations. (Don’t worry if you know nothing about the App Router. We are only using Next’s basic functionalities to learn how to create an image gallery.)
• Would you like to use Turbopack for next dev? » No / Yes Select Yes as we are ok using the Turbopack for faster local development. (Again, don’t worry if you know nothing about Turbopack.)
• Would you like to customize the default import alias? » No / Yes Select No as we are okay with using Next’s default import alias for this test-app.

Once you’ve answered all the questions, Next.js will create your new app.

Go Inside the Project Directory

After the installation process, navigate into the project directory:

cd click-text-to-edit-project-001

Create the ElementMaker Component

Here is where the wonders happen!

Create an ElementMaker.js file in your project’s app directory.

touch app/ElementMaker.js

Afterward, open the newly created file and replicate the code below. We will go through its explanation afterward.

ElementMaker.js

// Create an ElementMaker component
export default function ElementMaker(props) {
  return (
    <span>
      {
        // Use JavaScript's ternary operator to specify <span>'s inner content
        props.showInputEle ? (
          <input
            type="text"
            value={props.value}
            onChange={props.handleChange}
            onBlur={props.handleBlur}
            autoFocus
            style={{ fontSize: "37px" }}
          />
        ) : (
          <span
            onDoubleClick={props.handleDoubleClick}
            style={{
              display: "inline-block",
              height: "50px",
              minWidth: "300px",
            }}
          >
            {props.value}
          </span>
        )
      }
    </span>
  );
}

In the snippet above, we did the following:

1. We created an ElementMaker component that returns the <span> element we want React to render to the browser.
2. We used the ternary operator to specify the <span>’s inner content. The ternary operator says that if props.showInputEle’s value is truthy, the computer should use the given <input> element as the <span>’s inner content. However, if props.showInputEle’s value is falsy, the computer should use a second <span> element as the first <span>’s inner content.

Note: We’ve not defined showInputEle, but we will do that soon. For now, though, you may have observed that we specified five attributes on the <input> element: type, value, onChange, onBlur, and autoFocus. Here is the purpose of each attribute:

• The type="text" attribute specifies that the <input> element is a single-line text field.
• We used the value attribute to set the <input> element’s content to the props parameter’s value property.
• onChange is an event listener that will trigger the handleChange function whenever <input>’s value changes.
• onBlur is an event listener that will trigger the handleBlur function whenever <input> loses focus. In other words, onBlur will invoke handleBlur whenever users click out of the <input> field.
• autoFocus is a Boolean attribute that tells the browser to focus automatically on the <input> element when the page loads.

We also specified an onDoubleClick event listener on the second <span> element. The onDoubleClick listener will trigger the handleDoubleClick function whenever users double-click the <span> element.

Note

• We will later define the handleChange, handleBlur, and handleDoubleClick functions in our HomePage component.
• Suppose you want a single-click editable text. In that case, simply change the onDoubleClick event listener to onClick.

AD

Invoke the ElementMaker Component

Remember that we aim to display a full-name bio that users can double-click to edit. So, open the page.js file located in the app folder of your Next.js application.

Red arrow pointing to the app directory’s page.js file.

Then, delete its content and replicate the following code. We will go through its explanation afterward.

page.js

"use client";
import { useState } from "react";
import ElementMaker from "./ElementMaker";

// Create a HomePage component
export default function HomePage() {
  // Set HomePage's state
  const [fullName, setFullName] = useState("Joe Abraham");
  const [showInputEle, setShowInputEle] = useState(false);

  return (
    <div style={{ padding: "50px" }}>
      <h1 style={{ marginBottom: "70px" }}>
        Double-click the Full Name’s Value to Edit
      </h1>
      <div style={{ fontSize: "37px" }}>
        <strong>Full Name: </strong>
        {/* Invoke the ElementMaker component with some attributes */}
        <ElementMaker
          value={fullName}
          handleChange={(e) => setFullName(e.target.value)}
          handleDoubleClick={() => setShowInputEle(true)}
          handleBlur={() => setShowInputEle(false)}
          showInputEle={showInputEle}
        />
      </div>
    </div>
  );
}

In the snippet above, we did the following:

1. We imported our ElementMaker component from the ElementMaker.js file.
2. We created a HomePage component and defined its states.
   • The fullName state stores each content the user types into ElementMaker’s <input> element. Note that we used "Joe Abraham" as the initial value of the fullName state.
   • The showInputEle state stores the Boolean value true or false. Remember that we used the showInputEle property in ElementMaker to determine the <span>’s inner content.
3. HomePage’s return statement used the <ElementMaker /> code to invoke the ElementMaker component. Then, we passed some attributes to ElementMaker’s props parameter. The attributes we passed are value, handleChange, handleDoubleClick, handleBlur, and showInputEle.
   • The value attribute references HomePage’s fullName state.
   • handleChange’s function updates the fullName state with the ElementMaker’s input element’s value.
   • handleDoubleClick’s function updates the showInputEle state with the Boolean value true.
   • handleBlur’s function updates the showInputEle state with the Boolean value false.
   • We initialized showInputEle with the showInputEle state.

Note

Declaring the "use client" directive at the top of the page.js file (above all other import statements) is essential. It designates the HomePage component as a Client Component that NextJS should render on the client rather than the server. The HomePage component works only as a Client Component because it uses React’s State hook (useState).

Making Sense of It All

Now that we’ve completed the coding, let’s discuss how the browser will implement it.

1. When the browser loads the homepage, it will read page.js and render its <h1> and <strong> elements.
2. On getting to the <ElementMaker /> code, the browser will invoke the ElementMaker component and pass in the specified attributes to its props parameter.
3. ElementMaker will return its <span> element. But the <span>’s inner content will depend on props.showInputEle’s value.
   • If showInputEle’s value is truthy, the <input> element will be the <span>’s inner content.
   • If showInputEle is falsy, the second <span> element will get rendered as the <span>’s inner content.
4. Suppose showInputEle is falsy, and the second <span> element with the text "Joe Abraham" gets rendered in the browser. In such a case, the <span>’s onDoubleClick event listener will trigger the handleDoubleClick function when you double-click the text. Then, handleDoubleClick’s invocation will update the state’s showInputEle property to true.
5. As a result of the state update, React will automatically re-render the HomePage component, thereby triggering ElementMaker, which will check if showInputEle is truthy.
6. Since showInputEle is now truthy, the <input> element will get set as the <span>’s inner content.
7. Each time the user types into the text field, <input> element’s onChange listener will trigger handleChange. Then, handleChange will update the state’s fullName property with the user’s data.
8. Once the user clicks out of the <input> field, onBlur will trigger handleBlur—which will update showInputEle to false.
9. As a result of the state update, React will re-render the HomePage component, thereby triggering ElementMaker, which will check if showInputEle is truthy.
10. Since showInputEle is now falsy, the <span> with the onDoubleClick attribute will get set as the first <span>’s inner content.

And there you have it! You’ve now seen how to click to edit elements in ReactJS!

Run the Application

Take a look at your app in the browser by running:

npm run dev

You can also try editing this tutorial’s live version.

Try It on Any React Project

Although this article used a simple React project to illustrate how to double-click to edit a web page’s text, the principles covered apply to any React application. So, you can use the concepts you’ve learned to add validations or make images (or an entire webpage) editable on double-click.