Read more/less effect in ReactJs

Here's the Readmore component.You just have to pass the text value and limit upto(here I have fixed it to 50 chars).The code check if the limit is crossed or not.If it is,it show read more link.On click,full text is shown.

var ReadmoreText = React.createClass({
getInitialState: function () {
    var string =this.props.text;
    var limit = 50;
    var limit_crossed = false;
    if (string.length > limit) {
        limit_crossed = true;
    }
    else {
        limit_crossed = false;
    }
    return ({
        limit_crossed: limit_crossed,
        flip: true,
        display_text: string.substring(0, limit),
        original_text: string,
        text: string.substring(0, limit),
        read_text: "  --Read more"
    });
},
readmore: function () {
    this.setState({flip: !this.state.flip}, function () {
        this.setState({
            display_text: this.state.flip ? this.state.text : this.state.original_text,
            read_text: this.state.flip ? "   ---Read more" : "  ---Read less"
        });
    });
},
render: function () {
    if (this.state.limit_crossed) {
        return (<div>{this.state.display_text}<a onClick={this.readmore}>{this.state.read_text}</a></div>)
    }
    else {
        return (<div>{this.state.text}</div>)
    }
}

});

You can call:

<ReadmoreText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna diam, finibus ut vehicula rhoncus, tincidunt eu elit. Praesent auctor vehicula tortor suscipit egestas." limit={25}/>