Bосстановление элементов React

Question

У меня есть работающий код, который удаляет первый и последние элементы массива. Как сделать, что с помощью кнопки ,,Відновити'' у мене все элементы вернулись? Большое спасибо)

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

function App(){
let array, changedArray] = userState([
{
id: 1,
title: 'title 1'
price:1
},
{
id:2,
title: 'title 2',
price:2
}
{
id:3,
title: 'title 3'
price: 3
}
])

function removeFirstElement () {
let newArray = [...array];
newArray.shift();
changedArray(newArray);
}

function removeLastElement() {
let newArray = [...array];
newArray.pop();
changedArray(newArray)
}

return(
<div>
<ul>{array.map(el =><li>{el.title} {el.price}</li>)}</ul>
<button onClick={removeFirstElement}>Видалити перший елемент</button>
<button onClick={removeLastElement}>Видалити останній елемент</button>
<button>Відновити</button>
</div>
);
}

export default App;

Answer 1

Вы можете сохранить start и end и использовать slice. Пример:

function RemoveAndRecover() {
  let [array, changedArray] = React.useState([
    { id: 1, title: 'title 1', price: 1 },
    { id: 2, title: 'title 2', price: 2 },
    { id: 3, title: 'title 3', price: 3 },
    { id: 4, title: 'title 4', price: 4 },
    { id: 5, title: 'title 5', price: 5 },
  ])
  const [start, setStart] = React.useState(0)
  const [end, setEnd] = React.useState(array.length)

  function removeFirstElement() {
    if (start < end) {
      setStart((s) => s + 1)
    }
  }

  function removeLastElement() {
    if (end > start) {
      setEnd((e) => e - 1)
    }
  }

  function reset() {
    setStart(0)
    setEnd(array.length)
  }

  return (
    <div>
      <ul>
        {array.slice(start, end).map((el) => (
          <li>
            {el.title} {el.price}
          </li>
        ))}
      </ul>
      <button onClick={removeFirstElement}>Видалити перший елемент</button>
      <button onClick={removeLastElement}>Видалити останній елемент</button>
      <button onClick={reset}>Відновити</button>
      <div>{start}, {end}</div>
    </div>
  )
}

ReactDOM.render(<RemoveAndRecover />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>

БЛОГ НА HUSL

Bосстановление элементов React

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