Implementing a Read More link in React.js

Question

I am trying to implement a Read More link, which expands to show more text after a click. I am trying to do this the React way.

<!--html-->
<div class="initialText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  <a>
    Read More
  </a>
</div>

<div class="fullText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

---

/* JavaScript */
/* @jsx DOM */
var component = React.createClass({

  getInitialState: function() {
    return {
      expanded: false
    };
  },

  expandedText: function() {
    this.setState({
      expanded: true
    });       
  },

  render: function() {
    return (
      <div>

      </div>
    );
  }

});

I am new to React. I am not sure how to handle everything inside the render method. How can I implement this functionality in pure React?

Answer 1

You can try the read-more-react library, link: https://www.npmjs.com/package/read-more-react

npm install --save read-more-react
import ReadMoreReact from 'read-more-react';


<ReadMoreReact 
        text={yourTextHere}
        min={minimumLength}
        ideal={idealLength}
        max={maxLength} 
/>

Answer 2

You're pretty much on the right track. As stated in the react docs here: https://facebook.github.io/react/tips/if-else-in-JSX.html

it's just using a classic if and a variable, like this:

render: function() {
    var expandedContent;
    if (this.state.expanded) {
        expandedContent = <div>some details</div>;
    }

    return (
       <div>
           <div>Title or likewise</div>
           {expandedContent}
       </div>
    );
}

Answer 3

I know I'm little late to answer this question but instead of using 2 strings why don't you do it by using just 1 string only.

check out this npm package https://www.npmjs.com/package/react-simple-read-more It'll solve the problem.

In case you are interested in code: https://github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx

Answer 4

Late answer once again, but maybe someone will need it.

So basically you just need one component that will receieve the text you want to display. Then you will use the useState hook that will set the value of text length - does it need to be short or long version displayed, and on the end one function that will toggle between short and long version of the text.

Code example:

import React, { useState } from 'react';

const ReadMore = ({text}) => {
  const [isReadMore, setIsReadMore] = useState(true);
  const toggleReadMore = () => {setIsReadMore(!isReadMore)};

  return (
    <p className='testimonials__quote__text'>
      {isReadMore ? text.slice(0, 150): text }
      // condition that will render 'read more' only if the text.length is greated than 150 chars
      {text.length > 150 &&
        <span onClick={toggleReadMore}>
          {isReadMore ? '...read more' : ' ...show less'}
        </span>
      }
    </p>
  )
}

export default ReadMore;

Answer 5

That's the complete solution in React Js:

Call Component:

<TeamCard description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." limit={150}/>

Component:

const TeamCard = ({ description, limit }) => {
  const [showAll, setShowAll] = useState(false);
  return (
    <p className="text-center text-white text-base pt-3 font-normal pb-5">
      {description.length > limit ? (
        <div>
          {showAll ? (
            <div>
              {description}
              <br />
              <button
                onClick={() => setShowAll(false)}
                className="text-primary"
              >
                Read Less
              </button>
            </div>
          ) : (
            <div>
              {description.substring(0, limit).concat("...")}
              <br />
              <button onClick={() => setShowAll(true)} className="text-primary">
                Read More
              </button>
            </div>
          )}
        </div>
      ) : (
        description
      )}
    </p>
  );
};
export default TeamCard;