react edit text on doubleclick code example
Example: React edit text on doubleclick
const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
...
toggle ? (
<p
onDoubleClick={() => {
setToggle(false)
}}
>{name}</p>
) : (
<input
type='text'
value={project.status}
/>
)}
<input
type="text"
value={name}
onChange={(event) => {
setName(name)
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === 'Escape') {
setToggle(true)
event.preventDefault()
event.stopPropagation()
}
}}
/>