ReactJS：表达 API 和 ReactJS 结构限制每行显示数据

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.BookData.map(BookData =>
    <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>)}

I can't figure out how to do it, to show the 4 columns per row.

Answer 1

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