React Component To readMore and readLess Content

in this tutorial, we’ll let you know how to create a read-more component using react 17. The content will hide and show using read-more and read-less links.

Sometimes, we have the number of stories and each story has an excessive amount of details. I’ll learn here how to add ‘Read more’ link on each story or description.

Here, I’ll create “Read More…” link and if the user is interested then he can click on more links and see the full content.

The descriptions on the dashboard page are too long, and I can’t figure out how to make them shorter.

In the many stories, if the description text is longer than a few characters, a show more link will be displayed to the user, revealing the further words.

I am using the below libs:

Checkout Other tutorials:

Create “Read More..” Component Using React

Let’s start the implementation of read more component using react.

Create a ReadMore.js file and added below the code:

import React,{useState} from 'react'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; const ReadMore = ({ description, limit }) => { const [showAll, setShowAll] = useState(false); return ( <Typography> {description.length > limit ? ( <div> {showAll ? ( <div> {description} <Button size="small" onClick={() => setShowAll(false)} className="text-primary" > Read Less </Button> </div> ) : ( <div> {description.substring(0, limit).concat("...")} <Button size="small" onClick={() => setShowAll(true)} className="text-primary"> Read More </Button> </div> )} </div> ) : ( description )} </Typography> ); }; export default ReadMore;

How To User readmore react Component

Let’s call Readmore component into our component where we need to show readmore and lessmore.

<Grid item xs={12}> <Typography className="sublabel" display="inline">Description:</Typography> <ReadMore description={alert.Detail.eventDescription[0].latestDescription} limit={150}/> </Grid>

Originally published at https://www.js-tutorials.com on October 21, 2022.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/