Read More Link in React JS

React JS

Today we are going to explain how to implement read more link in React JS. In previous article we have explained Dropdown List in React JS. Sometimes we need the display limited text with read more link in our project. So today we will explain how to implement read more link in our React JS project.

We can implement read more link in a single file and also implement using parent-child relationship using props. So firstly we will implement in a single file like as below example.

ReadMore.js

import React, {Component} from 'react';

class ReadMore extends Component {
    state = {
        isReadMoreText: true,
        data: 'Web Study Point is a best online platform where anyone can learn ' +
            'web technology in easiest way. We provides study materials and web ' +
            'technology tutorial like as JavaScript tutorial, PHP tutorial, ' +
            'React JS tutorial, Python tutorial and many more programming things ' +
            'with explanation & practically. Web Study Point provides real practical ' +
            'scenario based article on JavaScript, React JS, PHP and python.',
    }

    showHideReadMoreLink = () => {
        this.setState({isReadMoreText: !this.state.isReadMoreText})
    };

    render() {
        const {isReadMoreText, data} = this.state
        return (
            <div>
                <h2>Read more... in React JS</h2>
                {isReadMoreText ? data.slice(0, 200) : data}
                <span 
                    onClick={this.showHideReadMoreLink} 
                    style={{color: '#0176b2', cursor: 'pointer'}}
                >
                    {isReadMoreText ? "...Read More" : " Read Less"}
                </span>
            </div>
        );
    }
}

export default ReadMore;

In the above code example we have implement read more link using state in a single JS file. we have use slice() method to break the data using state behavior. Now we will import ReadMore component in app.js file like as below example.

App.js

import React from 'react';
import './App.css';
import ReadMore from "./components/ReadMore/readMore";

function App() {
  return (
    <div className="App">
      <ReadMore />
    </div>
  );
}
export default App;

Output

read more link in react js

If we want to make separate common component to implement read more link in React JS then we can implement like as below example.

ReadMore.js

import React, {Component} from 'react';
import ReadMoreComponent from "./readMoreComponent";

class ReadMore extends Component {
    render() {
        return (
            <ReadMoreComponent>
                Web Study Point is a best online platform where anyone can learn web
                technology in easiest way. We provides study materials and web technology
                tutorial like as JavaScript tutorial, PHP tutorial, React JS tutorial,
                Python tutorial and many more programming things with explanation & 
                practically. Web Study Point provides real practical scenario based article 
                on JavaScript, React JS, PHP and python.
            </ReadMoreComponent>
        );
    }
}

export default ReadMore;

In the above code we have used ReadMoreComponent to display data using read more link. Now we will create ReadMoreComponent file.

ReadMoreComponent.js

import React, {Component} from 'react';

class ReadMoreComponent extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        isReadMore: true,
        data : this.props.children,
    }
    showHideReadMoreLink = () => {
        this.setState({ isReadMore: !this.state.isReadMore })
    }
    render() {
        const { isReadMore, data } = this.state
        return (
            <div>
                <h2>Read more... in React JS</h2>
                {isReadMore ? data.slice(0, 200) : data}
                <span
                    onClick={this.showHideReadMoreLink}
                    style={{color:'#0176b2', cursor: 'pointer'}}
                >
                    {isReadMore ? "...Read More" : " Read Less"}
                </span>
            </div>
        );
    }
}

export default ReadMoreComponent;

In the above code example we have used props children to get the data from parent component. We have put the all logic in this component. Now we can use this ReadMoreComponent component in any place in our project where we want to display read more link. We can say this is the common component to display read more link our project. Now we will import ReadMore component in app.js file like as below example.

App.js

import React from 'react';
import './App.css';
import ReadMore from "./components/ReadMore/readMore";

function App() {
  return (
    <div className="App">
      <ReadMore />
    </div>
  );
}
export default App;

Output

read more link in react js

Conclusion

So in this tutorial we have explained how to implement read more link in React JS. Using this tutorial anyone can easily implement read more link in our project.

If you want to add something or improve this tutorial or find anything wrong or incorrect then please leave a message using below comment box

1 thought on “Read More Link in React JS

Leave a Reply

Your email address will not be published. Required fields are marked *

eight − three =