showing results for - "react edit text on doubleclick"
Emely
23 Aug 2020
1//https://flaviocopes.com/react-edit-doubleclick/
2
3const [toggle, setToggle] = useState(true)
4const [name, setName] = useState('test')
5
6...
7
8toggle ? (
9  <p
10    onDoubleClick={() => {
11      setToggle(false)
12    }}
13  >{name}</p>
14) : (
15  <input
16    type='text'
17    value={project.status}
18  />
19)}
20
21<input
22  type="text"
23  value={name}
24  onChange={(event) => {
25    setName(name)
26  }}
27  onKeyDown={(event) => {
28    if (event.key === 'Enter' || event.key === 'Escape') {
29      setToggle(true)
30      event.preventDefault()
31      event.stopPropagation()
32    }
33  }}
34/>