Вопрос по реакту

Question

У меня есть код. С помощью каждой отдельной функции я удаляю каждый отдельный элемент. Как сделать, чтобы с помощью кнопки restore восстановить все элементы вместе? Можете объяснить, как для этого копию этого элемента восстановления и восстановить элементы? Спасибо большое)

import logo from './logo.svg';
import React, {useState, useRef} from 'react';
import './App.css';

function App() {

function delete1Element () {
let one = document.getElementById('1');
one.remove();
}

function delete2Element () {
let two = document.getElementById('2')
two.remove()
}

function delete3Element () {
let three = document.getElementById('3')
three.remove();
}

return (
  <div>

<div>
   <button onClick={restoreElements}>Restore</button>
 <ul id={'elements'}>
         <li id={'1'}>First element</li>     <button onClick={delete1Element}>Delete element</button>
         <li id={'2'}>Second element</li>    <button onClick={delete2Element}>Delete element</button>
         <li id={'3'}>Third element</li>     <button onClick={delete3Element}>Delete element</button>
 </ul>

      </div>
  </div>

  );
}

export default App;

Answer 1

Для начала не работать с DOM напрямую, а использовать состояние Не претендую на правильное решение, мб опытные ребята меня поправят

import logo from './logo.svg';
import React, {useState, useRef} from 'react';
import './App.css';

function App() {
const data = [
    {
      id: 1,
      text: "First element"
    },
    {
      id: 2,
      text: "Second element"
    },
    {
      id: 3,
      text: "Third element"
    }
]
const [elems, setElemsState] = useState(data)
const removeElem = (elemId) => {
    //Тут удаление
}
const restoreElements = () => {
    setElemsState(data)
}
return (
<div>
  <div>
   <button onClick={restoreElements}>Restore</button>
    <ul>
        {elems.map(elem => (
           <li key={elem.id}>{elem.text} 
              <button onClick={()=> removeElem(elem.id)}>Delete element</button>
          </li>
        ))}
    </ul>
  </div>
</div>

  );
}

export default App;

БЛОГ НА HUSL

Вопрос по реакту

Ответы (1 шт):