`
const products = [
 {
   id: 0,
   image: '/path/to/image.jpg',
   name: 'Shoes',
   cost: 543,
   seller: 'Wo Duy'
 },
 {
  id : 1,
   image: '/path/to/image.jpg',
   name: 'Boots',
   cost: 124,
   seller: 'Tu Ming'
 },
 {
   id: 2,
   image: '/path/to/image.jpg',
   name: 'hat
   cost: 30
   seller: 'Che Sung'
 },
]

<div>
 {products.map(({id, image, name, cost, seller}, idx) => (
    <div key={id} className="grid">
       {!(idx % 4) ? (
         <div className="grid">
           <img src={image} alt={name} />
           <div className="list">{name}</div>
           <div className="list">{cost}</div>
           <div className="list">{seller}</div>
         </div>
       ) : (
       <div className="block">
         <div className="list">{name}</div>
         <div className="list">{cost}</div>
         <div className="list">{seller}</div>
       </div>
       )}
    </div>
  ))}
</div>
`

{items.map((value, key, array) => {
  return (
     {key % 3 === 0 &&
     (<div class="grid">grid</div>
      <div class="block">
         {array.slice(key, key + 3).map((val, i) => {
             return <div class="list" key={i}>{val}</div>
             })
          }</div>
          )}
      )
})}

Попробуй так

А не вариант это на два компонента разбить?

У него наверное в разметке косяк, массив с товарами приходит большой, а на экран выводятся блоки, в каждом из которых по три элемента этого большого массива и в добавок блоки между собой разделены дополнительным дивом.

Подумать над разметкой и компоненты плодить не придется

ну большой компонент и один маленький с 1-3 позициями, все это в диве.

голосую за разбиение на компоненты, чем сильнее дробление - тем лучше

ваууу магический работает, спасибо, но есть косяк, почему в list попадает товары из grid т,е grid дублируется.

items.map((value, key, array) =>{
   if (value%4 === 0)
   {
      return(<BigImageComponent params/>)
   }
   if(value%3 === 0)
   {
      return( <SmallImageComponent params[key] params[key-1] params[key-2]/>)
   }
}

Сложно сказать, я на телефоне пишу, может скобку не там поставил
Надо подумать

key+1

{items.map((value, key, array) => {
  return (
     {key % 3 === 0 &&
     (<div class="grid">grid</div>
      <div class="block">
         {array.slice(key+1, key + 4).map((val, i) => {
             return <div class="list" key={i}>{val}</div>
             })
          }</div>
          )}
      )
})}

вот так

Не будет работать

дап, ты прав, но общая идея думаю понятна. var new_array =items.map((value, key, array) =>{
   if (value%4 === 0)
   {
      return(<BigImageComponent params/>)
   }
   if(value%3 === 0)
   {
      return( <SmallImageComponent params[key] params[key-1] params[key-2]/>)
   }
}
return new_array

вот так будет

Спасибо вам работает:

ну

?