Author avatar

Vivek Kumar

Implementing a Read More Link in React.js

Vivek Kumar

  • Aug 12, 2019
  • 7 Min read
  • 868 Views
  • Aug 12, 2019
  • 7 Min read
  • 868 Views
Web Development
React

Introduction

In the contemporary world of the Internet, there are many aspects of sharing content online. You are required to take care of them. One of the key aspects that must be taken into account is to ensure that the content is conducive enough to be shared upon different viewing mediums. For instance, the viewership of the content over a small mobile screen would be an utterly different experience than watching it over a desktop or laptop screen.

When you are observing the content on a small display screen then it is essential to arrange the content in such a format where the maximum amount of meaningful content can share the provided space for the convenience of the reader. To achieve that, the redirecting link to the additional content can play a pivotal role.

While speaking about the best approach of saving enough space on the screen by hiding the extra amount of content, the link building is the most reliable one. Here, the concept of link building is going to differ from the fact that instead of redirecting you from one page to another, it displays the content already existing over the page but had been hidden to improve the page size and content proportion.

In this guide, the objective is to help you learn how you can implement “read more” links in React. We are going to discuss the general issues that you may face while forming the commands and which are the most dependable ways to overcome them. Once you finish with this guide, I am fully assured that the problems related to this subject will be a matter of the past.

The Problem You May Encounter with the Render Method

The following are the commands that are generally used while implementing Read More link in the React JS. Once we finish with the command, the additional content can be expanded with a single click of the mouse on the given link.

1
2
3
4
5
6
7
8
9
10
<div class="initialText">
  Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  <a>
    Read More
  </a>
</div>

<div class="fullText">
 Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
html

When you are going with the JavaScript, after creating the Document Object Model built on basic HTML, you may go with the following commands for the extended text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var component = React.createClass({

  getInitialState: function() {
    return {
      expanded: false
    };
  },

  expandedText: function() {
    this.setState({
      expanded: true
    });       
  },
  
  render: function() {
    return (
      <div>
      </div>
    );
  }
});
jsx

The problem related to rendering is usually encountered by the people who are new to React. Once they are through with the commands and are inside the functionality, they don’t understand how to proceed with the rendering.

Just Build Component Conditionally or Return Null

Now, the problem is not as serious as most people think it is. Basically, all you must to do is display an additional div based on state property expanded. It can be easily achieved by building components conditionally. If, due to any specific reason, you don’t wish to go with the conditional component building then you can simply return null.

A small but effective method to implement this technique is highlighted down below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var component = React.createClass({
    getInitialState: function() {
        return {
           expanded: false
       };
    },

    expandedText: function() {
        this.setState({
            expanded: true
        });       
    },

    getMoreTextDiv: function() {
        if (this.state.expanded) {
          return <div> My extended content </div>;
        } else {
          return null;
        }
    }
});
jsx

After implementing the commands, your concerned render function does look like the following:

1
2
3
4
5
6
7
8
9
render: function() {
     var expandedDiv = this.getMoreTextDiv();
     return (
         <div>
             <a onClick={this.expandedText}>Read more</a>
             { expandedDiv }
         </div>
     );
}
jsx

Here, it is quite interesting to note that every time you call setState(), it is going to trigger render() with the application of a new state. In the case when expanded is false then your application will return null as a component; simply denoting nothing! Obviously, in that case, nothing will be displayed over the screen.

Please understand that while clicking on your link, it is going to automatically update your state as well as the expanded value. Through that, you are going to return a div in the form of a component and it’s going to be displayed over the screen.

The problem is resolved and your link is a precisely responding component delivering accurate results whenever clicked upon.

Conclusion

As the main objective of this guide is complete, let’s discuss how much difference the above explanations have bought to our approach to building a link in the React JS framework. During the course of this guide, we explored the importance of content compatibility with respect to the size of the display medium. Once we realized that importance, we delved into the significance of Read more link in the given context and what are the common mistakes committed by beginners in it while working on React. Then we threw some light on the simple tricks in the commands that can turn out to be key solutions, including building components conditionally or returning null.

Reference

You can further refer the following resource which is also used as a reference for this guide:

4