React: отрисовать равное количество элементов

Question

Друзья, вопрос от новичка в реакте. В массиве itemList у нас 4 объекта (может быть любое множество). Мне необходимо отрисовать два div'a (компонент <SItemsList>) и чтобы item'ы распределялись в них равномерно. То есть, в примере у нас 4 item, нужно, чтобы в один div попало 2 item и в другой тоже. Как понимаю, нужно создать переменную, которая посчитает количество элементов в массиве и разделит результат на 2. Дальше скорее всего через метод slice нужно как-то всё это дело отрисовать, но тут мои знания уже нуждаются в помощи за которую буду очень благодарен.

const App = () {
  return (
    <ComponentWrapper>
      {itemList.map(({ item } => {
      const itemsCount = item.lenght / 2; // тут, наверное, не совсем так?
      return (
        <SItemsList>
        </SItemsList>
        <SItemsList2>
        </SItemsList2> // тоже не уверен, нужно ли 2 компонента отрисовывать
     })};
    </ComponentWrapper>
  );
}

let itemList = [
 {
  item: 'Элемент',
 },
 {
  item: 'Элемент 2',
 },
 {
  item: 'Элемент 3',
 },
 {
  item: 'Элемент 4',
 },
]

Answer 1

Для того, что бы отрендерить часть массива в отдельном компоненте, его необходимо сначала разделить.

В компоненте, создадим хук useEffect, который будет отслеживать изменения в переменных, переданных как зависимости(В нашем случае это будет переменная itemListIn, по умолчанию равная itemList).

При изменении будем делить массив на 2, исходя из требований(в вашем вопросе, просто поделим его пополам).

Т.к. не указано, каким образом исходный массив попадает в компонент, оставим это за скобками, однако, если он будет меняться, необходимо будет вызвать функцию setIn для записи нового значения.

Так же в примере ниже, есть 2 варианта рендера новых массивов. Выбирайте сами по необходимости и вашей реализации.

Компонент SItemsList принимает массив и рендерит его, компонент SItemsListSpan рисует элемент массива

// Исходный массив
let itemList = [
  {
    item: 'Элемент',
  },
  {
    item: 'Элемент 2',
  },
  {
    item: 'Элемент 3',
  },
  {
    item: 'Элемент 4',
  },
  {
    item: 'Элемент 5',
  },
];

const SItemsListSpan = ({ element }) => {
  return (<span>{element.item}{' '}</span>)
}
// имплементация компонента SItemsList(вы не указали, я придумал)
const SItemsList = ({ element }) => {
  return (
    <div>
      {element.map((item, index) => <SItemsListSpan key={index} element={item} />)}
    </div>
  )
}

export default function App() {  
  // Назначаем исходное значение itemListIn равное массиву itemList
  const [itemListIn, setIn] = useState(itemList); // исходный массив
  const [itemListFirst, setFirst] = useState([]); // первая часть
  const [itemListSecond, setSecond] = useState([]); // вторая часть
  // хук будет срабатывать при каждом изменении элемента itemListIn
  useEffect(() => {
    const item = [ ...itemListIn ];
    setFirst(item.splice(0, Math.round(itemListIn.length / 2)));
    setSecond(item);
  }, [itemListIn]); // Зависимость хука

  return (
    <div>
      <div>{itemListFirst.map((item, index) => <SItemsListSpan key={index} element={item} />)}</div>
      <div>{itemListSecond.map((item, index) => <SItemsListSpan key={index} element={item} />)}</div>
      <hr />
      <SItemsList element={itemListFirst} />
      <SItemsList element={itemListSecond} />
    </div>
  );
}

БЛОГ НА HUSL

React: отрисовать равное количество элементов

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