how to show every part of array in different form in react component

Question

I'm going to implement a component which shows data in boxes. Every constant number of data should put in a div to return.

I have a Box component which shows data. In Tutorial component, we have props containing array of data :

//Box component
import React from 'react'
import { Link } from 'react-router-dom'

const Box = ({ item, index}) => {
    return (
        <div  key={index}>
            <div className="tutorial">
                <img src={item.imgLink} className="resp-img" alt="Tutorial" />
                <div className="tutorial-details">
                    <h6>{item.title}</h6>
                    <p><span className="lessons">
                        <i className="zmdi zmdi-assignment"></i>{item.shortDesc}</span><span className="duration"><i className="zmdi zmdi-time"></i>{item.duration}</span></p>
                    <p className="abs">{item.desc}</p>
                    <Link to={item.link} className="greybutton">VIEW COURSE</Link>
                </div>
            </div>
        </div>
    );
}

export default Box;


//Tutorial Component
import React from 'react'
import Box from './Box'

const Tutorials = ({ props, columnNumbers = 3 }) => {
    return (
        <>
            {
                props.map((item, index) => {
                    return (
                                 // ????
                            )})
             }
        </>

    )
}
export default Tutorials;

How should i map props in Tutorial to get the result?

<div className="row">
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
</div>
<div className="row">
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
</div>
<div className="row">
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
   <Box item={item} index={index} ></Box>
</div>

do you need to have those rows in your html? :) I would map your array of data into array of slices of items with reduce function — Kasia, Sep 16 '19 at 14:25
just keep in mind that such operation comes with some performance cost - consider avoiding adding html rows and maybe solve this by css only :) — Kasia, Sep 16 '19 at 14:36
This question became "How to implement a chunk" and lost OP's intent. — Dennis Vash, Sep 16 '19 at 15:05

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You need to chunk the items and then map them to boxes.

chunk: Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements.

Note: check chunk implementation, the example uses lodash.chunk.

_.chunk(items, columnNumbers).map((itemGroup,index) => (
  <div className="row" key={index}>
    {itemGroup.map(item => (
      <Box key={item.id} item={item.data} index={item.index} />
    ))}
  </div>
));

Possible Tutorials implementation:

const Tutorials = ({ items, columnNumbers }) => (
  <>
    {chunk(items, columnNumbers).map((itemGroup, index) => (
      <div className="row" key={index}>
        {itemGroup.map(item => (
          <Box key={item.id} item={item.data} index={item.index} />
        ))}
      </div>
    ))}
  </>
);

Tutorials.defaultProps = { 
  columnNumbers: 3
}

export default Tutorials;

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 16 '19 at 14:26

Dennis Vash

50,196
9
100
118

4

Unless he is already using `lodash`, I don't recommend adding it. Simply chunk yourself: https://stackoverflow.com/a/11764168/8558606 – Guilherme Matuella Sep 16 '19 at 14:31
This is actually the correct answer. Why the downvote here? – Dupocas Sep 16 '19 at 14:31
1

Yes, he could implement `chunker` by himself, but this doesn't invalidate the answer. – Dupocas Sep 16 '19 at 14:32

score 0 · Accepted Answer · answered Sep 16 '19 at 15:03

As @Dennis Vash's answer we should chunk our data and if we dont use lodash we can do this:

const Tutorials = ({ items, columnNumbers }) => (
  <>
    {chunk(props, 4).map((items, i)=>{
                    return(
                        <div className="row tutorials" key={i}>
                            {items.map((item, index)=>{
                                return(
                                <Box item={item} index={index} colStyle={colStyle}></Box>
                            )})}
                        </div>
                    )}
  </>
);


//chunk function
//stackoverflow.com/a/11764168/8558606 
function chunk (arr, len) {

  var chunks = [],
      i = 0,
      n = arr.length;

  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }

  return chunks;
}

how to show every part of array in different form in react component

2 Answers2