Author avatar

Vivek Kumar

Rendering a List in Reverse Order

Vivek Kumar

  • Jun 27, 2019
  • 6 Min read
  • 15 Views
  • Jun 27, 2019
  • 6 Min read
  • 15 Views
Web Development
React

Introduction

CSS has become a common choice for most of the animators working in the industry to attain perfection right away for simple to advanced animation. This is one of the key reasons why more components are being added to CSS day by day, making it more powerful than ever before; not to mention, even being on par or surpassing the HTML component. The situation nowadays is that the order of the HTML elements in the output won’t make a difference to the page, in terms of the display standpoint. It doesn’t matter whether we are talking about the small or the large layout; CSS is there to help you out in every way possible.

Let’s put the accessibility and the semantics aside, and focus on the tactic that could enable you to render the elements in the reverse chronological order with the help of CSS. By the end of this guide, it will be feasible for you to attain the best results, when it comes to the process of rendering the list in the reverse order, in the most convenient manner.

A Simple Case Study

Let’s take a glance at the following situation where, as per your priority or requirement, you are required to display certain elements horizontally or vertically, as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
<ul >
    <li > One </li>
    <li > Two </li>
    <li > Three </li>
    <li > Four </li>
    <li > Five </li>
    <li > Six </li>
    <li > Seven </li>
    <li > Eight </li>
    <li > Nine </li>
    <li > Ten </li>
</ul>
html

Whether the change is taking place vertically or horizontally, there has to be a change in the value of the flex-direction in order to reverse the order of the components. The commands that would be used in order to make the adjustment in the order are shown below:

1
2
3
4
5
/* show reverse by horizontal row */
.row-reverse { display: flex; flex-direction: row-reverse; }

/* show reverse by vertical column */
.column-reverse { display: flex; flex-direction: column-reverse; }
css

From the above code, it is not hard to see that the row-reverse command publishes the elements the reverse order in the horizontal direction. On the other hand, column-reverse is going to ensure the publishing of the components in vertical reverse order.

Now, just have a look at the result that we have achieved in the row reverse and the column reverse in CSS. The elements which are presented in the list down below are in numeric order but, as you can see, have successfully displayed in the reverse order.

Imgur

Now, as you can see, we have successfully accomplished the list reordering task in CSS. When you face a similar problem related with AngularJS as well, then this technique is quite an effective measure to handle the situation. The problem with the AngularJS is that one tends to repeat over a specific object’s keys, while at the same time there is no precise way to reinstate over those keys in the reverse order concerned from the template. That is the reason why the reversal of the elements with the help of CSS can actually curtail the problem to a significant extent.

Moreover, we all know how much the animators and the programmers anticipated from Flexbox when it was introduced for the first time. It was considered to be a revolutionary term and meant to transform CSS in several remarkable ways. But with the passage of time, the shine of Flexbox also dwindled. The good news is that there are certain tricks in the books of Flexbox that can actually help you out when it comes to real-time need. It is fully expected that the horizons of the Flexbox are going to expand in the due course of time and it will get the recognition that it truly deserves.

At the present moment, we are rendering the list in typical React JS style format. It is the list which has been passed as an array prop. So, whenever a new kind of element is included, it forms like the newest item has been incorporated at the end of the list.

But the approach that we are going to focus on here is to bring the newest item to the top and make the whole list appear in the reverse order. Now, there are two approaches to attaining the same outcome. One is to reverse the whole list and form a new array every time something new is added. After that, pass down this reversed list in the form of the prop. The second approach is the application of Shift. But both of them are seldom used due to the lack of performance.

If you are planning to pick the choice of reversing the list by applying reverse(), shift() or splice(), then it is recommended that you create a shallow copy of the concerned array in priority, thereafter apply the function on that specific copy.

For instance,

1
[...this.props.myList].reverse().map(createListItem, this)
javascript

or,

1
this.props.myList.slice(0).map(createListItem, this)
javascript

It is important to note that the Props in React JS should not mutate under any circumstances.

Conclusion

With the completion of this guide, we have successfully learned quite a lot about rendering a list in reverse order. We have learned that giving the flex-direction display to the horizontal row reverses it as well as the vertical column in CSS. The addition of the props also plays a crucial role and I do hope you understood it well.

0