ребята, подскажите пожалуйста как исправить код чтобы работало добавление, удаление, редактирование , у меня когда на кнопку нажимаю все исчезает. Мой код вложение, также sandbox https://codesandbox.io/s/intelligent-mopsa-ttk8sm?file=/src/App.js
App.js
import React, { useState } from "react";
function App() {
const [arr, setArr] = useState([]);
const [value, setValue] = useState("");
const result = arr.map((element, index) => {
return (
<p key={index} onDoubleClick={() => remove(index)}>
{element} +"X"
</p>
);
});
function remove(index) {
setArr([...arr.slice(0, index), ...arr.slice(index + 1)]);
}
function add() {
// добавление элемента
setArr([...arr, value]);
}
function changeValue(event) {
// изменение содержания поля input
setValue(event.target.value);
}
return (
<div>
{result}
<form>
<input type="text" placeholder="" />
<input onClick={changeValue} />
<button onClick={add}>Добавить</button>
</form>
</div>
);
}
export default App;
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);