Rishika Rishika - 1 month ago 12
React JSX Question

Maximum amount of characters in a div/paragraph tag in react

I need to add a "read more" link after my paragraph reaches 250 characters..got many solutions using javascript but i am unable to do it with reactjs. Help in any form will be great!
thanks
Example :
text text text texttext texttext texttext texttext texttext texttext texttext text...Read more

Answer

If I understand correctly, the difference from what you could see online is that you don't want to show a Read more button if the text has less than 250 characters.

It would be great if you could share what you already have, but just in case, here is a prototype:

class LongText extends Component { 
    state = { showAll: false }
    showMore = () => this.setState({showAll: true}); 
    showLess = () => this.setState({showAll: false});
    render() {
        const {content, limit} = this.props;
        const {showAll} = this.state;
        if(content.length<=limit) {
            // there is nothing more to show
            return <div>{content}<div>
        }
        if(showAll) {
            // We show the extended text and a link to reduce it
            return <div>
                {content}
                <a onClick={this.showLess}>Read less</a>
            </div>
        }
        // In the final case, we show a text with ellipsis and a `Read more` button
        const toShow = content.substring(0,limit)+"...";
        return <div>
            {toShow}
            <span onClick={this.showMore}>Read more</a>
        </div>
    }
}
Comments