Implementing A Read More Link In React.js

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.

Solution 1:

So basically you want to display an extra div depending on the state property 'expanded'.

You can create a component conditionally. If you don't want a component you can just return null. I would just have a small method like:

var component = React.createClass({
    getInitialState: function() {
        return {
           expanded: false
       };
    },

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

    getMoreTextDiv: function() {
        if (this.state.expanded) {
          return<div> My extended content </div>;
        } else {
          returnnull;
        }
    }
});

and your render function should become:

render: function() {
     var expandedDiv = this.getMoreTextDiv();
     return (
         <div><aonClick={this.expandedText}>Read more</a>
             { expandedDiv }
         </div>
     );
}

Each time you call setState() you trigger render() using the new state.

If expanded is false you are going to return null as a component, which means basically, nothing. So nothing will be displayed.

When you click on your link it will update your state and the expanded value, so you will return a div as a component and it will be displayed.

I think a good start would be to read this. This is a really great article and explains how render basically works, and the link with state.

You should also make sure you understand this kind of small example http://jsfiddle.net/3d1jzhh2/1/ to see how state and render are linked with each other.

Solution 2:

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

npm install --save read-more-react
importReadMoreReactfrom'read-more-react';


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

Solution 3:

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>
    );
}

Solution 4:

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

Solution 5:

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:

importReact, { useState } from'react';

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

  return (
    <pclassName='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 &&
        <spanonClick={toggleReadMore}>
          {isReadMore ? '...read more' : ' ...show less'}
        </span>
      }
    </p>
  )
}

exportdefaultReadMore;

Share