ReactJS: Express API and ReactJS Structure Limit ShowData per Row

Question

I want to do something that I can't figure how to do, In a row, I want to show 4 boxes from my Express Backend data, after that, I want to skip to another row and print more 4 boxes, and report that until I reach the end of the Api.

With Express I have created my API and it's small 114 (but I want to use 112 for this question) columns with data, So what I want to do is I want to print a row with 4 columns then report the same state again.

Here is my code, but the problem is that it shows all the columns within one row (all 114 columns) and it gets messed up.

{this.state.api.map(api =>
    <a className="surah" href={api.link}>
        <p className="surah-counter">{aoi.id}</p>
        <div>
            <h2 className="surah-title-al">{api.sure}</h2>
            <h1 className="surah-title">{api.surah}</h1>
            <h3 className="ayah-number">{api.number}</h3>
        </div>
    </a>)}

I can't figure out how to do it.

So basically, I want to print 4 times my API in 4 columns, then skip to the next row and do the same until is consumed. — , Feb 07 '21 at 19:32

score 0 · Answer 1 · answered Feb 07 '21 at 23:59

0

One quick way to do it would be by

{this.state.BookData.map((BookData, index) =>
  <>
    {(index + 1) % 4 == 0 && <br/>}
    <a className="surah" href={BookData.link}>
        <p className="surah-counter">{BookData.id}</p>
        <div>
            <h2 className="custom-clax1">{BookData.sure}</h2>
            <h1 className="custom-clax2">{BookData.surah}</h1>
            <h3 className="custom-clax3">{BookData.number}</h3>
        </div>
    </a>
  </>
)}

All this code does is insert a break tag <br/> every 4 items in the array BookData, breaking the long line of items into multiple lines.

Mainly the line {(index + 1) % 4 == 0 && <br/>} does that.

Now if would like to wrap every 4 elements into something, like a <div/>, you're gonna need to chunk the BookData array (look at this question for that) into chunks of 4, them loop through it like this, for example

{chunckedBookData.map((bookDataChunk) =>
  <div class="custom-style-for-each-chunk">
    {bookDataChunk.map((BookData, index) =>
      <a className="surah" href={BookData.link}>
        <p className="surah-counter">{BookData.id}</p>
        <div>
            <h2 className="custom-clax1">{BookData.sure}</h2>
            <h1 className="custom-clax2">{BookData.surah}</h1>
            <h3 className="custom-clax3">{BookData.number}</h3>
        </div>
      </a>
    )}
  <div/>
)}

answered Feb 07 '21 at 23:59

Diego Vieira

80
6

Thanks for the help, would be nice to explain how to chunk data, becuase i'm new with react and js. – Feb 08 '21 at 11:50
That's why I left this [link](https://stackoverflow.com/questions/8495687/split-array-into-chunks) to a question that explains that. Explaining how to chunk an array is kind of out of the scope of this question. – Diego Vieira Feb 08 '21 at 12:00
Yes Diego i cheked, the problem is that this is react, and is ExpressJS backend. – Feb 08 '21 at 12:03
Both React and Express are javascript libraries, meaning, whatever works for plain javascript (like the linked question shows), also works if you're using React or Express. In other words, `BookData` is a normal javascript array that can be chunked following what's on the linked question. – Diego Vieira Feb 08 '21 at 12:05
Yes but how to take the data from express and chunck to React, or i need to do that to expressjs. – Feb 08 '21 at 12:21
You already have the array to be chunked. It's `this.state.BookData`. Then, in the render function of your component, chunk the `this.state.BookData` array like the linked question suggests and then use my code above to iterate through it. – Diego Vieira Feb 08 '21 at 12:25

ReactJS: Express API and ReactJS Structure Limit ShowData per Row

1 Answers1