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.