Преобразовать список массивов внутри объекта в элементы div, содержащие до четырех элементов в React

Сначала я бы разделил массив на подмассивы. Если у вас есть любимая библиотека утилит, вероятно, в ней есть функция для этого, например фрагмент Lodash или SplitEvery Ramda. Или вы можете написать свой собственный.

const createChunks = (array, size) => {
  const chunks = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }
  return chunks
}

// In your component:
const chunks = createChunks(dataEstrenos, 4);

После этого сопоставьте массивы следующим образом:

return (
  <>
    {chunks.map((chunk, i) => (
      <div key = {i}>
        {chunk.map((item) => (
          <div key = {item.id}>Here data from item. Eg, {item.title}</div>
        ))}
      </div>
    ))}
  </>
);

Использование библиотеки Lodash может обеспечить лучшую производительность в некоторых случаях форматирования данных.

Но если вы хотите написать ванильный код реагирования, вот предложение

function App() {
  // Calculate the number of groups
  const ARRAY_GROUPSIZE = 4;

  // Create an array of group indices from 0 to numGroups-1
  const groups = Array.from(
    { length: Math.ceil(dataEstrenos.length / ARRAY_GROUPSIZE) },
    (_, i) => i * ARRAY_GROUPSIZE
  );

  // Map each group start index to a sub-array of dataEstrenos sliced from the start index with size of ARRAY_GROUPSIZE
  const groupedData = groups.map((groupStartIndex) =>
    dataEstrenos.slice(groupStartIndex, groupStartIndex + ARRAY_GROUPSIZE)
  );

  return (
    <div>
      {groupedData.map((group, index) => (
        <div key = {index}>
          {group.map((item) => (
            <div key = {item.id}>
              {item.title} - {item.product}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default App;