CRUD in React, update item using useState not working - reactjs

Question

I am trying to create a CRUD using React Hooks but I am having some problems on the updateItem function.
The first input using useState works perfectly (I can type inside the input) but when I click Rename Item, the second input appears but I can’t type inside and doesn’t log any errors from console.
Here is my code:
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
function App() {
//List with one item
const [list, setList] = useState([{ id: Math.random() + 1, name: 'Test' }]);
//Inputs
const [input, setInput] = useState('');
const [newInput, setNewInput] = useState('');
const [edit, setEdit] = useState();
function createItem(value) {
if (!value.trim()) return;
let obj = { id: Math.random() + 1, name: value }
setList([...list, obj])
}
function deleteItem(id) {
setList(list.filter(item => item.id !== id));
}
function updateItem(id) {
setEdit(
<div>
//I can't type anything in here
<input type="text" value={newInput} onChange={e => setNewInput(e.target.value)} />
<button onClick={() => {
let array = [...list];
array.map((item, i) => {
if (item.id === id) array[i] = { id, newInput }
})
setList([...array])
setEdit('') //Remove the edit from the DOM
}}>Rename</button>
</div>
)
}
return (
<div>
<input type="text" value={input} onChange={e => setInput(e.target.value)} />
<button onClick={() => createItem(input)}>Add Item</button>
{list.map(item => (
<div key={item.id}>
<p>{item.name}</p>
<button onClick={() => updateItem(item.id)}>Rename Item</button>
<button onClick={() => deleteItem(item.id)}>Delete Item</button>
</div>
))}
{edit}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

Try to use setEdit to show/hide through boolean value. You will have ability to type in the input
import ReactDOM from "react-dom";
import React, { useState } from "react";
function App() {
//List with one item
const [list, setList] = useState([{ id: Math.random() + 1, name: "Test" }]);
//Inputs
const [input, setInput] = useState("");
const [newInput, setNewInput] = useState("");
const [edit, setEdit] = useState(false);
function createItem(value) {
if (!value.trim()) return;
let obj = { id: Math.random() + 1, name: value };
setList([...list, obj]);
}
function deleteItem(id) {
setList(list.filter(item => item.id !== id));
}
function updateItem() {
setEdit(true);
}
return (
<div>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
/>
<button onClick={() => createItem(input)}>Add Item</button>
{list.map(item => (
<div key={item.id}>
<p>{item.name}</p>
<button onClick={() => updateItem(item.id)}>Rename Item</button>
<button onClick={() => deleteItem(item.id)}>Delete Item</button>
{edit && (
<div>
//I can't type anything in here
<input
type="text"
value={newInput}
onChange={e => {
setNewInput(e.target.value);
}}
/>
<button
onClick={() => {
let array = [...list];
array.map((o, i) => {
if (o.id === item.id) array[i] = { id: item.id, newInput };
});
setList([...array]);
setEdit(false); //Remove the edit from the DOM
}}
>
Rename
</button>
</div>
)}
</div>
))}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

The problem is with how you run updateItem() function.
You are using the following call <button onClick={() => updateItem(item.id)}>Rename Item</button>
In updateItem(), you do a setEdit and it adds an input box and button to your screen.
But now, you have trouble updating the input box. This is because the input box will only be updated when you run the updateItem() function again.
So in order for your input box to be updated, you would have to run setEdit again
Here is a solution of how to put it in your main component so that the input box updates with each render
import ReactDOM from "react-dom";
import React, { useState } from "react";
function App() {
//List with one item
const [list, setList] = useState([{ id: Math.random() + 1, name: "Test" }]);
//Inputs
const [input2, setInput2] = useState("");
const [newInput, setNewInput] = useState("");
const [edit, setEdit] = useState(null);
function createItem(value) {
if (!value.trim()) return;
let obj = { id: Math.random() + 1, name: value };
setList([...list, obj]);
}
function deleteItem(id) {
setList(list.filter((item) => item.id !== id));
}
function renameItem() {
// Rename item
alert("Rename item " + edit + " to " + newInput);
setEdit(null);
setNewInput(null);
}
return (
<div>
<input
type="text"
value={input2}
onChange={(e) => setInput2(e.target.value)}
/>
<button onClick={() => createItem(input2)}>Add Item</button>
{list.map((item) => (
<div key={item.id}>
<p>{item.name}</p>
<button onClick={() => setEdit(item.id)}>
Rename Item {item.id}
</button>
<button onClick={() => deleteItem(item.id)}>Delete Item</button>
</div>
))}
{edit && (
<div>
<input
type="text"
value={newInput}
onChange={(e) => setNewInput(e.target.value)}
/>
<button onClick={() => renameItem()}>Rename</button>
</div>
)}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
There are other better solutions, such as turning the {edit && ...} part to an component. This should get your code working for now.
I also left out the code to actually rename the item, you should be able to do that yourself also.