Doesn´t render items React useState - reactjs

Question

I would like to add new tasks but they are not rendered, here is this part of my code:
setItemsFromBackend([...itemsFromBackend, {id: uuidv4(), content: text }]);
setText("")
}
const [itemsFromBackend, setItemsFromBackend] = useState([{ id: uuidv4(), content: "First task" }]);
const [text, setText] = useState("");
const columnsFromBackend = {
[uuidv4()]: {
name: "Requested",
items: itemsFromBackend,
},
[uuidv4()]: {
name: "To do",
items: [],
},
[uuidv4()]: {
name: "In Progress",
items: [],
},
[uuidv4()]: {
name: "Done",
items: [],
},
};
<div>
<input type="text" value={text} onChange={(e) => setText(e.target.value)}/>
<button onClick={addItem}>Add</button>
</div>
Here is the complete project in codesandbox:
https://codesandbox.io/s/trello-task-yhbmu?file=/src/Kanban.jsx
Any help will be appreciated. Thanks!

Answer 1

setItemsFromBackend({ ...itemsFromBackend, id: uuidv4(), content: text });
itemsFromBackend is an array, so you're spreading in the wrong spot. Try this:
setItemsFromBackend([...itemsFromBackend, {id: uuidv4(), content: text }]);

Answer 2

First thing, instead of a div use a proper form around the form elements. And instead of listening on the button's click event, listen on form submit, so you can add an item by hitting the Enter key too, not just button click.
<form onSubmit={addItem}>
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
<button>Add</button>
</form>
I think, you should update the way you handle state. At the moment there are different pieces everywhere. You use columns, columnsFromBackend and these also contain the itemsFromBackend state. And with all these it's way too easy to mutate the state without realising it.
In your addItem method you update itemsFromBackend by using setItemsFromBackend and you forgot that you should also update the columns by using setColumns. If you don't use setColumns, React will not be aware of the changes and you won't see the updates because React won't re-render the components.
Not sure what you receive from your backend, but you should either use the columnsFromBackend object as state (which doesn't seem to be flat enough), or you could create a new state for each columns. You kind of use both of these at the moment by storing the requested column in itemsFromBackend.
The following snippet uses only columns and text states, everything unnecessary is removed, and columns is updated in addItem the same way as you do it in onDragEnd:
function Kanban() {
const [columns, setColumns] = useState({
[uuidv4()]: {
name: "Requested",
items: [{ id: uuidv4(), content: "First task" }]
},
[uuidv4()]: {
name: "To do",
items: []
},
[uuidv4()]: {
name: "In Progress",
items: []
},
[uuidv4()]: {
name: "Done",
items: []
}
});
const [text, setText] = useState("");
const addItem = (e) => {
e.preventDefault();
const item = { id: uuidv4(), content: text };
const requestedColumnId = Object.entries(columns).find(
(i) => i[1].name === "Requested"
)[0];
const column = columns[requestedColumnId];
setColumns({
...columns,
[requestedColumnId]: {
...column,
items: [...column.items, item]
}
});
setText("");
};
const onDragEnd = (result, columns, setColumns) => {
// no changes here
}
return (
<div style={{ display: "flex", justifyContent: "center", height: "100%" }}>
<form onSubmit={addItem}>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<button type="submit">Add</button>
</form>
{/* no changes below */}
You can find the forked sandbox here: https://codesandbox.io/s/trello-task-forked-okix3