React.js how to write different classes to a component during rendering?

Question

React

Hello, I'm doing my first pet project on react, I have little experience, the project shows gifs from api giphy.com,
request, the appearance of gifs - it all works, only they are just in the same container, li in the same ul. And it looks just awful, I tried to style it with grids, but one row of grids took the height of the highest GIF, that is, the smallest one still had an empty space below. I want to make it so that there is not one container, but several, depending on how many columns will be on the screen. I roughly see it like this, an object comes from the server, I look at its length, look at the width of the user's viewport, take the width of the gif and its margins, divide the viewport width by the width of the picture, round it - get the number of columns, take the number of gifs in the object divided by the number columns - I get the number of gifs in one column, now I need to dynamically change the class of the container where the gifs are written during rendering,
app.js:
https://github.com/N4sky1/Gifs/blob/master/src/App.js
giflist.js:
https://github.com/N4sky1/Gifs/blob/master/src/com..
Here I am trying to make
gif.js: https
://github.com/N4sky1/Gifs/blob/master/src/com...
Maybe it can be done in some other way, I don’t know, I will be grateful for any help and comments, thanks.

Answer 1

Probably, you need to count before rendering, when we get props, in the getDerivedStateFromProps life cycle method