ReactJS: Express API and ReactJS Structure Limit ShowData per Row

Admin 1
Viewed 43

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.

reactjs express javascript
1 Answers

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/>
)}
user_151655360
Related