react-inline-edit/

[utterances-bot]

How to build an inline edit component in React · Emma Goto

Inline editing allows users to edit content without navigating to a separate edit screen. In this tutorial, we’ll be building an accessible…

https://www.emgoto.com/react-inline-edit/?utterances=a1e8055d1b79bf020138d2e7maB3TT3JMYRdaHag%2Fzd%2FujmPybr6O%2Fqyz%2FG5ZqzLALCad2yfEWdM0usEcB3TCHz2slS%2BTxDb4poqS5MBQ%2FOPFPx8R0%2F7c1K20b1LIRuvHHlj4szmHbp3pvl0ZDo%3D

[madeWORKSHOPdev]

Super clear and useful, thanks!

[mcfrego]

Great! Thank you! :D

[maxr96]

Thanks a lot for the tutorial. It is definitely a very detailed one. I used it to create an inline edit with Solid.JS.

[morganmcleod]

Cool thanks! I MUI-fied it like this as part of a custom, optionally numeric, data grid:

import TextField from '@mui/material/TextField'; ... return ( <TextField size="small" variant="standard" value={editingValue} onChange={onChange} onKeyDown={onKeyDown} onBlur={onBlur} error={numeric && isNaN(editingValue)} InputProps={{ disableUnderline: true, sx: {fontWeight: 'bold'}
}} /> );