How to edit text on double-click in ReactJS

Overview

We can edit the text of a page on double-click by following the steps below:

Step 1: Get the right Node and NPM version

Ensure that you have installed Node 10.16 (or greater) and NPM 5.6 (or greater) on your system.

Step 2: Create a new React app

Use NPM’s create-react-app package to create a new React app called click-text-to-edit-project.

npx create-react-app click-text-to-edit-project

Step 3: Clean up the srcfolder

Next, navigate to your project's src folder and perform a cleaning of the folder. Then, delete all its files.

Step 4: Create your code files

Create the following files inside your project’s src folder.

  • index.js
  • App.js
  • ElementMaker.js

Step 5: Render the Appcomponent

Open your index.js file and render the App component to the DOM like so:

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// Render the App component into the root DOM
ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<App />);

Step 6: Create the ElementMakercomponent

Open your ElementMaker.js file and replicate the code below:

// ElementMaker.js
import React from "react";
// Creat an ElementMaker component
function ElementMaker(props) {
  return (
    // Render a <span> element
    <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
          />
        ) : (
          <span 
            onDoubleClick={props.handleDoubleClick}
            style={{ 
              display: "inline-block", 
              height: "25px", 
              minWidth: "300px", 
            }}
          >
            {props.value}
          </span>
        )
      }
    </span>
  );
}
export default ElementMaker;

As shown in the snippet above, we will do the following:

  1. We create an ElementMaker component that renders a <span> element.
  2. We use the ternary operator to specify the <span>’s inner content.

Simply put, the ternary operator says that if props.showInputEle’s value is truthy, the computer will use the given <input> element as the <span>’s inner content.

However, if props.showInputEle’s value is falsy, the computer will use a second <span> element as the first <span>’s inner content.

Step 7: Invoke the ElementMakercomponent

Open your App.js file and replicate the code below:

// App.js
import React, { useState } from "react";
import ElementMaker from "./ElementMaker";
// Creat an App component
function App() {
  // Set App's state
  const [fullName, setFullName] = useState("Joe Abraham");
  const [showInputEle, setShowInputEle] = useState(false);
  return (
    <div>
      <h1>Double Click the Full Name's Value to Edit</h1>
      <div>
        <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>
  );
}
export default App;

The purpose of each attribute in the ElementMaker’s invocation above is as follows:

  • The value attribute keeps App’s fullName state.
  • handleChange’s function updates the state’s fullName property with the ElementMaker’s input element’s value.
  • handleDoubleClick’s function updates the state’s showInputEle property with the Boolean value true.
  • handleBlur’s function updates the state’s showInputEle property with the Boolean value false.
  • We initialize showInputEle with the state’s showInputEle property.

Step 8: Run the application

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

npm start

You can also try mine below. It includes a line-by-line code explanation.

import React, { useState } from "react";
import ElementMaker from "./ElementMaker";

// Creat an App component
function App() {
  // Set App's state
  const [fullName, setFullName] = useState("Joe Abraham");
  const [showInputEle, setShowInputEle] = useState(false);

  return (
    <div>
      <h1>Double Click the Full Name's Value to Edit</h1>
      <div>
        <strong>Full Name: </strong>
        {/* Invoke the ElementMaker component with some attributes */}
        <ElementMaker
          value={fullName} // Initialize the ElementMaker's value attribute with App's fullName state
          handleChange={(e) => setFullName(e.target.value)} // Initialize the ElementMaker's handleChange attribute 
                                                            // with a function that updates the state's fullName 
                                                            // property with the ElementMaker's <input> element's value
          handleDoubleClick={() => setShowInputEle(true)} // Initialize handleDoubleClick with a function that updates
                                                          // state's showInputEle property with the Boolean value true
          handleBlur={() => setShowInputEle(false)} // Initialize handleBlur with a function that updates state's 
                                                    // showInputEle property with the Boolean value false
          showInputEle={showInputEle} // Initialized showInputEle with the state's showInputEle property
        />
      </div>
    </div>
  );
}

export default App;

Free Resources

Attributions:
  1. undefined by undefined
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)