Как реализовать react-easy-sort?

Question

[starkingdom]

Вопрос, нужно сделать поле в которое я вбиваю ссылку на картинку, нажимаю на кнопку и эта картинка появляется внизу, если хочу ещё, проделываю то же и появляется рядом вторая картинка внизу ( смотреть на скирн) или что-то похожее.
После того как оно там появилось, я так понимаю это какой-то должен быть массив, и нужно через react-easy-sort, как я тоже понимаю их двигать, если захочу поставить картинку 1 вместо 2 или наоборот.
Не могу придумать как это реализорвать, может есть какие-то ролики или статьи похожие.

Answer 1

[0xD34F]

const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');

const onChange = e => {
  setSrc(e.target.value);
};

const onClick = () => {
  setSrc('');
  setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      src,
    },
  ]);
};

const onSortEnd = (iOld, iNew) => {
  setItems(([...items]) => (
    items.splice(iNew, 0, items.splice(iOld, 1)[0]),
    items
  ));
};

<div>
  <input value={src} onChange={onChange} />
  <button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
  {items.map(n => (
    <SortableItem key={n.id}>
      <img src={n.src} />
    </SortableItem>
  ))}
</SortableList>

Comments

[starkingdom]

Спасибо!

[starkingdom]

Друг, возник ещё один вопрос, а как в этот код можно всунуть кнопку которая будет удалять один из элементов этого массива?

[0xD34F]

starkingdom, мы не друзья.

Что конкретно вам непонятно?

[starkingdom]

0xD34F, Ваш код что выше, понятен. Я делаю свой пет проект, и понял что хотелось бы иметь возможность удалять картинку что добавил, пробовал убрать через фильтр, но оно удаляет или всё, или ничего. Потому я и спрашиваю, как можно это реализовать

[0xD34F]

starkingdom, повторяю вопрос: что конкретно вам непонятно?