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.jsApp.jsElementMaker.js
Step 5: Render the Appcomponent
Open your index.js file and render the App component to the DOM like so:
// index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";// Render the App component into the root DOMReactDOM.createRoot(document.getElementById('root')).render(<App />);
Step 6: Create the ElementMakercomponent
Open your ElementMaker.js file and replicate the code below:
// ElementMaker.jsimport React from "react";// Creat an ElementMaker componentfunction ElementMaker(props) {return (// Render a <span> element<span>{// Use JavaScript's ternary operator to specify <span>'s inner contentprops.showInputEle ? (<inputtype="text"value={props.value}onChange={props.handleChange}onBlur={props.handleBlur}autoFocus/>) : (<spanonDoubleClick={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:
- We create an
ElementMakercomponent that renders a<span>element. - 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.jsimport React, { useState } from "react";import ElementMaker from "./ElementMaker";// Creat an App componentfunction App() {// Set App's stateconst [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 */}<ElementMakervalue={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
valueattribute keepsApp’sfullNamestate. handleChange’s function updates the state’sfullNameproperty with theElementMaker’s input element’s value.handleDoubleClick’s function updates the state’sshowInputEleproperty with the Boolean valuetrue.handleBlur’s function updates the state’sshowInputEleproperty with the Boolean valuefalse.- We initialize
showInputElewith the state’sshowInputEleproperty.
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
- undefined by undefined
