How to render an array of articles into different components?

Question

React

I have two components - 'CardBig' and 'CardSmall', also have an array of articles that I would like to display through these components.

If there is one component, then I would do this:

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

But I want 'CardBig' to be first, then 4 'CardSmall', and then again. How to implement it?

Answer 1

https://jsfiddle.net/wd7j5gt1/