Read More Read Less Button in React JS

Today in this post, we will learn how to create a read more/read less button in React JS. In our projects, sometimes we just need to show some initial important text instead of displaying the long content. 

In that case, we can use the read more/read less toggle button to toggle the display of the long and short content. By using this method, we can also reduce initial page load time.

Create Read More Read Less Button in React JS

Here in the above demo video, we have created a simple card with some initial text and a button named “Read More”. When the user clicks on the ‘Read More ’ button we are showing the entire content and changed the button text to ‘Read Less’.

Creating Read More Read Less Component

Let’s first create a component `ReadMoreLess.js` to show initial and long content with a toggle button.

import React, { useState } from "react";

function ReadMoreLess() {
  const [isShowMore, setIsShowMore] = useState(false);

  const toggleReadMoreLess = () => {
    setIsShowMore(!isShowMore);
  };

  return (
    <div className="card">
      <h3>Read More Read Less</h3>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint numquam
        quia delectus quo vero quod iusto corrupti illum accusamus odit hic ut
        ab minus eveniet, corporis ullam tempora debitis iure. Repellat,
        molestias
      </p>
      {isShowMore && (
        <p>
          sapiente exercitationem odio quia, animi eos distinctio tempora, ipsum
          hic vitae modi eum nostrum id perspiciatis impedit dolores.
        </p>
      )}

      <button onClick={toggleReadMoreLess}>
        {isShowMore ? "Read Less" : "Read More"}
      </button>
    </div>
  );
}

export default ReadMoreLess;

In the above code, we have defined a boolean state variable` isShowMore` to track the display of additional content. We have displayed the initial text inside a <p> tag. Now to show and hide the additional content based on the `isShowMore` state variable we have used the trinary operator.

Finally, we have our Read More button. We have used the trinary operator to change the button text base on the `isShowMore` state variable. If the value `isShowMore` is true the button label will be “Read Less” and if the value is false then the button label will be “Read More”.

To handle the button click we have written the `toggleReadMoreLess()` function. Inside this function, we will set the `isShowMore` value to false if it was true or true if it was false.
We can also make an API call to fetch the additional content to display when the user clicks on the read more button. While fetching the data from the API we can show a spinning loader this will provide a better user experience.

Also, check out:

• Create a Like Dislike button in React JS

Using ReadMoreLess Component in App.js

Here we are just using the <ReadMoreLess /> component inside our App.js.

import React from 'react'
import ReadMoreLess from './ReadMoreLess'

function App() {
  return (
    <div>
      <ReadMoreLess />
    </div>
  )
}

export default App

Conclusion

In this tutorial, we have learned how to create a simple Read More and Read Less button to show and hide additional content using React JS. I hope it was helpful.