← flaviocopes.com

React, edit text on doubleclick

Published Feb 04 2021

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

I had the need to listen for a doubleclick event on an element, and make that element editable.

One way to do so is to use a toggle state variable, and when the element is doubleclicked we show a different element:

const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')

...

toggle ? (
  <p
    onDoubleClick={() => {
      setToggle(false)
    }}
  >{name}</p>
) : (
  <input
    type='text'
    value={project.status}
  />
)}

Then I added a few props to the input element. First, we assign a name state to the value prop.

Then we use the onChange() event listener to set the value of the name variable when there’s any change to the content of the input field.

Finally we use onKeyDown() to intercept the Enter or Escape key press event and go back to showing the p element:

<input
  type="text"
  value={name}
  onChange={(event) => {
    setName(name)
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === 'Escape') {
      setToggle(true)
      event.preventDefault()
      event.stopPropagation()
    }
  }}
/>

You can also add any side effect into that function, for example to save the value somewhere if you have to.

I write books for developers 👇🏼