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

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

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

    getMoreTextDiv = function() {
        if (this.state.expanded) {
          return myText;
        } else {
          return myText.substr(0, 250);
        }
    }

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