Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Render list of arrays inside an object into divs with up to four items in React

I have an object like this:

export const dataEstrenos = [
    {
      id: 1, product: "any product", title: "any title"
    },
    {
      id: 2, product: "any product", title: "any title"
    },
    {
      id: 3, product: "any product", title: "any title"
    },
    {
      id: 4, product: "any product", title: "any title"
    },
    {
      id: 5, product: "any product", title: "any title"
    },
    {
      id: 6, product: "any product", title: "any title"
    },
    {
      id: 7, product: "any product", title: "any title"
    }  
  ];

I want to display items in groups of four elements inside a container div, like this:

<div>
    <div>Here data from first item</div>      
    <div>Here data from second item</div>      
    <div>Here data from third item</div>      
    <div>Here data from fourth item</div> 
</div>
<div>      
    <div>Here data from fifth item</div>      
    <div>Here data from sixth item</div>     
    <div>Here data from seventh item</div>
</div>

…Items inside object may be any quantity, and the last container div may not have four items depending on how many items are left in the array/object (like the example above).

How can I achieve this in react? I am new to React so my attempts to achieve this are not worth showing here. Thank you!

Tags:

2

Answers


  1. 0

    I would first split the array in to sub arrays. If you have a favorite utility library it probably has a function for this, such as Lodash’s chunk, or Ramda’s splitEvery. Or you could write your own.

    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);

    After that, map over the arrays like this:

    return (
  <>
    {chunks.map((chunk, i) => (
      <div key={i}>
        {chunk.map((item) => (
          <div key={item.id}>Here data from item. Eg, {item.title}</div>
        ))}
      </div>
    ))}
  </>
);
    Login or Signup to reply.
  2. 0

    Using Lodash library can provide you better performance in some case of data formatting

    But if you want to write a vanilla react code, here’s a suggestion

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search