react.js как вставить блок в середине цикла map?

Question

Всем привет, я очень новичёк в реакт и столкнулся с такой задачей:

У меня есть 5 блоков с данными, которые я вывожу в цикле.

Но я не могу понять, как мне добавить в середину совершенно другой блок. Данные для карточек я загружаю из json, потом через .map передаю данные для каждого отдельного блока.

Буду крайне признателен за помощь в этом вопросе!

renderBeds() {
    return this.state.beds.map((bed, index) => {
        return (
            <Bed
                key={index}
                bed={bed}
            />
        )
    })
};

Answer 1

Я бы решил таким способом

render() {
  const {beds} = this.state;
  return (
    <>
      {beds
        .slice(0, 2)
        .map((bed, index) => {
          return (
            <Bed
              key={bed.id}
              bed={bed}
            />
          )
        })
       }
       <Divider />
      {beds
        .slice(2)
        .map((bed, index) => {
          return (
            <Bed
              key={bed.id}
              bed={bed}
            />
          )
         })
        }
    </>
  )
}

БЛОГ НА HUSL

react.js как вставить блок в середине цикла map?

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