Displaying Dynamic Data in Grid Format in ReactJS

For my Mod 5 Project at Flatiron School, we had to write an application using a Rails backend and a ReactJS frontend.

I chose to write an app that will track wines for various owners so they can maintain their own Wine Cellar. Ultimately, my goal is to expand the app to incorporate an API to a wine database. The app will allow the users/owners to enter minimal wine information, i.e. color, what food they’re serving the wine with, and budget, etc. Using that information, I will go out, and pull in a number of wine candidates for their review. They can select wines from what is presented to add to their cellar (this is ultimately, I don’t have that functionality in the app currently).

My biggest technical challenge with this project was displaying the entire collection of wines and each owners’ wines in a readable and aesthetically pleasing format. Primarily, React wanted to just list each one of my wines vertically.

I spent quite a lot of time researching React’s Container, Row, and Column functionality. Those components seemed to be the most likely answer. I watched numerous videos and read numerous articles and even modelled a few of the examples but to no avail — my wine data was not budging from its vertical listing.

The primary advantage of ReactJS is that it is mobile-first in accommodating smaller devices. There are several articles that outline the fact that React breaks the device into 12 columns and the developer uses that as a styling parameter to indicate the number of columns that should be listed across the device horizontally. However, a consistent theme that became apparent is that a lot of the articles and tutorials would demonstrate the Row and Column functionality using fixed data. For example, an array of high-end cars, a menu for a restaurant, famous celebrities — data that tends to be stable and consistent. I needed my display to accommodate more dynamic data. I concluded that my challenge lie primarily in the fact that my array of wines was one dimensional. It contained multiple data elements for each wine, but otherwise the array was very linear. I decided my best bet was to read the array into another array of smaller arrays. My goal was then to have an array of arrays of three wines. My thinking was that I could then iterate through the Split Array and read each of those items across the screen horizontally.

My first step was to make a stateless component for the Winecard that would house the information for each Wine data piece. I could then pull that in as one data element and not have it surrounded by all of the JS tags and superfluous data that would make the WineContainer more difficult to read. I knew that I would ultimately be dealing with a nested .map situation. So, I needed it to be as clean and readable as possible.

This WineCard receives the information for each individual wine as props and formats the card info for the display.

My next challenge was to iterate through my Wine array and re-write it into an Array of Arrays of three wines. I picked three wines because I thought that would be a manageable number for the display horizontally. I wrote the function to perform that within the WineContainer itself:

This function receives the one dimensional wine array, iterates through the array and slices off portions of the array to create the new array of arrays of three wines. I used slice and chunk, which establishes how many elements should be in each slice/sub-array. The chunk variable can be passed in from the callback and/or set through a default value like I did in the above example. I then pushed each of the sub-arrays into the result array which is returned by the function.

In the top of this snippet, I set my wine array equal to tempArray so I can pass that into the breakIntoArrayOfArrays function that’s outlined in the previous snippet. Once I have that new and broken array, inside of my return, I begin to iterate through the new broken array, I immediately then iterate through each of the smaller arrays of three and call on my WineCard to actually display each of the individual Wine’s info:

My results from that approach were:

While, clearly, this is not multiple rows of three wines, I was thrilled. I’m pretty sure the Heavens parted and the Angels sang when my display refreshed with this presentation. I knew I was on the right path. I am running with this presentation for now but will update further when I determine how to better control the number of WineCards that are displayed across the device.