# React, edit text on doubleclick

> Learn how to make text editable on double-click in React by toggling a state to swap a p element for an input, handling onChange and Enter and Escape keys.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-02-04 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-edit-doubleclick/

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:

```jsx
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:

```jsx
<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.