ReactJS: Express API and ReactJS Structure Limit ShowData per Row

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