How to Implement a "Read More" Link in React
Introduction
React's state triggers render every time it changes. This property allows the implementation of many different features, including tons of custom UI components such as popovers, tooltips, accordions, etc. Popular UI libraries for React use this concept extensively for their components.
This guide explores the simplest way to implement a "read more" link in a React app.
About "Read More" Links
As the name suggests, a "read more" link is a hyperlink or an <a> rendered on the DOM as collapsible content. When you click the link, you are shown more content on the same page that is otherwise hidden. They are extensively used on web apps these days to manage additional content and are also quite popular in native apps for the same use case. The underlying concept behind any collapsible or expandable UI component is the same as that of a "read more" link, even though they may have different use cases.
Using "Read More" Links
Typically, a "read more" link is used to display additional content on web pages where either the total content is not known beforehand or it occupies too much space in a viewport. Accordions and collapsible content work in the same way, the only difference being that they generally present a list of items, either a list of cards or a list of <div> with content inside.
Read more" links are a great way to manage content on a web app without taking up extra space. You can use them to display the full bio of a person on a profile page in your app. You can also use them to conditionally display additional content on blogs or news feed details in a social media application.
Implementing "Read More" Links
Let's jump into implementing "read more" links in React.
Approach
The concept behind implementing a "read more" link is conditional rendering. Using a simple <a> on the page coupled with an on-click event, you can fire a function to conditionally render the additional content in its parent <div>. Your app will have a state that will be set to false initially, since the link is collapsed. This state variable will be set to true inside the event handler, and using some condition blocks such as if-else statements or ternary operators, the component or content can be outputted. Since the state variable changes on an event, a render method will be triggered and the updated DOM will be mounted on the page displaying additional data without refreshing the page.
Setup
Make sure you have Nodejs and npm installed on your machine (at least version 8 or higher)
Create a new project using create-react-app:
1npx create-react-app react-read-moreCleaning Up the Template
Remove the logo, App.css, and all their imports from App.js. Clean out the starter template inside the App component. Your App.js should look like
this:
1import React from 'react';
2import './App.css';
3
4function App() {
5 return(
6 <div className="App">
7 </div>
8 )
9}
10
11export default App;Note: Sometimes removing App.css might land you an error. In such cases, instead of deleting the App.css, keep it empty. Or, if you have already deleted it, create a blank CSS file under the same name in the root directory.
Adding Styles
Add the following styles inside index.css.
1.App{
2 margin: 10% 40%;
3}
4.read-more-link{
5 color: blueviolet;
6 text-decoration: underline;
7 letter-spacing: 1px;
8 cursor: pointer;
9}
10.extra-content{
11 color: cornflowerblue;
12 font-weight: 500;
13}Creating State and Local Variables
Import useState hook from React to use state inside a functional component.
1import React,{useState} from 'react';Create a state variable to store the present state that conveys information about the expanded or collapsed state of the link. Call it readMore.
1...
2const [readMore,setReadMore]=useState(false);
3...Keeping a clean code saves the JSX for the link and the extra content inside JavaScript constants.
1...
2const extraContent=<div>
3 <p className="extra-content">
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, consectetur nequeab
5 porro quasi culpa nulla rerum quis minus voluptatibus sed hic ad quo sint, libero
6 commodi officia aliquam! Maxime.
7 </p>
8 </div>
9const linkName=readMore?'Read Less << ':'Read More >> '
10...The first constant stores a <div> with a child <p> and embedded dummy lorem ipsum. You can have additional content, links, cards, or any kind of HTML that you want to display here inside the parent <div>
.
The second constant conditionally stores the name of the link. Your link should change its name dynamically depending on what it's doing at the moment. As the assignment is made on conditionally checking the state variable, any change made to the state variable will also make the necessary changes to this constant.
Conditionally Outputting the HTML
Finally, inside the return statement, render an <a> with an onClick event and fire a function on triggering this event. Inside this function or the event handler, toggle the readMore state and output the linkName inside the <a>. Finally, using a ternary operator, output the constant extraContent holding the additional content.
1...
2 return (
3 <div className="App">
4 <a className="read-more-link" onClick={()=>{setReadMore(!readMore)}}><h2>{linkName}</h2></a>
5 {readMore && extraContent}
6 </div>
7 );
8...All in all, your App.js should look like
this:
1import React,{useState} from 'react';
2
3function App() {
4 const [readMore,setReadMore]=useState(false);
5 const extraContent=<div>
6 <p className="extra-content">
7 Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, consectetur neque ab
8 porro quasi culpa nulla rerum quis minus voluptatibus sed hic ad quo sint, libero
9 commodi officia aliquam! Maxime.
10 </p>
11 </div>
12 const linkName=readMore?'Read Less << ':'Read More >> '
13 return (
14 <div className="App">
15 <a className="read-more-link" onClick={()=>{setReadMore(!readMore)}}><h2>{linkName}</h2></a>
16 {readMore && extraContent}
17 </div>
18 );
19}
20
21export default App;Testing
Inside the root directory, run :
1npm startClick the link and it will show you some additional content. Click it again and the content goes away.
Improvising
Remember to break the entire code into modular and reusable components. Feel free to customize this feature as per the needs of your app. If you intend to show only text, you can render this component inside a card already holding some truncated content. In some cases, instead of rendering a link, you can render it as a Show More button. If you want to make a custom accordion or an expanded menu on the navbar, you can use the same concept of conditional rendering along with some CSS touch up.
Conclusion
"Read more" links are common these days and can be easily implemented using conditional rendering, as explained in this guide. You can also use several React packages for the same purpose, but using a library for such a task seems like overkill. Implementing components using some well-defined logic not only widens the learning horizons of a developer, but also mkeeps the app free from unnecessary packages and libraries. As an exercise, you can try figuring out a neat CSS hack to do something similar.