Tengo una pequeña aplicación de React en la que puedes hacer clic en un fragmento de texto para reemplazarlo con un campo de entrada que te permita editarlo.

El problema es que el componente EditableText no parece querer mostrar el estado del texto de editingText en el campo de entrada.

Ver ejemplo aquí: https://codesandbox.io/s/distracted-ellis-kyrdb

Para la posteridad, el código de la aplicación principal es:

 export default function App() { const [cats, setCats] = useState([ { id: 1, name: "fred" }, { id: 2, name: "jim" } ]); const [activeCat, setActiveCat] = useState({}); const handleClick = (cat, e) => { setActiveCat(cat); }; const saveName = (newName) => { // save this cat's new name... }; return ( <div className="App"> <div className="catMenu"> {cats.map((row) => ( <div className="catItem" key={row.id} onClick={(e) => handleClick(row, e)} > {row.name} </div> ))} </div> <div className="activeCat"> <h2> <EditableText text={activeCat.name} saveText={saveName} /> </h2> </div> </div> ); }

y para el componente EditableText :

 const EditableText = (props) => { const { text, saveText } = props; const [editing, setEditing] = useState(false); const [editingText, setEditingText] = useState(text); useEffect(() => { const handleKeydown = (e) => { if (editing) { if (e.keyCode === 13) { // Enter key pressed saveText(editingText); setEditing(false); } if (e.keyCode === 27) { // Escape key pressed setEditingText(text); setEditing(false); } } }; window.addEventListener("keydown", handleKeydown); return () => { window.removeEventListener("keydown", handleKeydown); }; }, [text, saveText, editing, editingText]); return ( <div> <div onClick={() => setEditing(true)} className={`et-${editing ? "hidden" : "active"}`} > {text} </div> <input type="text" value={editingText} onChange={(e) => setEditingText(e.target.value)} className={`et-input-${editing ? "active" : "hidden"}`} /> </div> ); }; export default EditableText;