React-Create a show more/less button

When I read something on websites and saw a show more/less button, I thought it was a good feature because it makes everything on the website look more clean. So I would like to share an easy way to insert a show more/less button by using React- State Hook.

1. Create React App component and add React, {useState}
2. Create const showMore and setShowMore as follow:

const [showMore, setShowMore] = useState(false);

3. Create condition and the button where you want to show text as follow:

In this case, it means if showMore is true, it will show the text. If showMore is false, only 250 characters will be shown. Here is how to use substring function: substring(indexStart, indexEnd) . You can check more information on how to use the function in this link MDN.

<h6>
  {showMore ? text : `${text.substring(0, 250)}`}
  <button className="btn">Show more</button>
</h6>

4. Set onClick function to setShowMore(!showMore). When the user clicks it will alternate between hiding and showing the text.

<button className="btn" onClick={() => setShowMore(!showMore)}>Show more</button>

5. Now the button works and will expand and contract. The next step is to change the button’s wording to Show more/Show less. By adding a condition in the button as follow:

{showMore ? "Show less" : "Show more"}

Here is the final code. It’s easy, isn’t it?

Finally when we click show more, the text will be shown and the button will be changed to Show less.

Resources

1. substring()
2. React — State Hook