Как рендерить массив статей, в разные компоненты?

Question

[melishev]

У меня есть два компонента - 'CardBig' и 'CardSmall', также есть массив статей, которые я хотел бы отобразить через эти компоненты.

Если есть один компонент, то я бы сделал так:

{props.articles.map((article) => (
    <CardNewsSmall media={article.media} category={article.category.name} title={article.title} date={article.date} />
 ))}

Но я хочу, чтобы 'CardBig' был первый, потом 4 'CardSmall', и опять по новой. Как это реализовать?

Comments

[Сергей Сергей]

прожуёт реакт такое?

.map( ( article, index ) => (
  index % 5 === 0 ?
  <CardNewsBig> :
  <CardNewsSmall>
) )

[Алексей Уколов]

Прожуёт.

Answer 1

[0xD34F]

массивСДанными.map((n, i) => {
  const Component = i % через_сколько_там_надо_чередовать_компоненты
    ? КомпонентРаз
    : КомпонентДва;

  return <Component {...n} />;
})

https://jsfiddle.net/wd7j5gt1/