---
title: "Discussion on \"In-place editing in a React.js component\" | Hashnode"
description: "Discussion on \"In-place editing in a React.js component\". Build an inline edit UI in React. Toggle edit mode, autofocus correctly with useEffect, save on Enter/blur, cancel with Esc, and update state cleanly."
url: "https://hashnode.com/posts/in-place-editing-in-a-reactjs-component/69691dfbe436a1f0a1eaab81"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [In-place editing in a React.js component](https://avi-lab.hashnode.dev/in-place-editing-in-a-reactjs-component?utm_source=hashnode&utm_medium=feed)

Build an inline edit UI in React. Toggle edit mode, autofocus correctly with useEffect, save on Enter/blur, cancel with Esc, and update state cleanly.

Jan 15 · 6 min read · avi-lab.hashnode.dev  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#components-in-react](https://hashnode.com/tag/components-in-react)
-   [#todoapp](https://hashnode.com/tag/todoapp)
-   [#todolist](https://hashnode.com/tag/todolist)

## Written by

[Avinash Verma](https://hashnode.com/@avi-nash)

@avi-nash

  
[View profile](https://hashnode.com/@avi-nash)

Build-Break-Repeat

## Responses

Markdown supported · ⌘↵ to post

No responses yet.