Implementing a Read More link in React.js

Question

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.

<!--html-->
<div class="initialText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
  <a>
    Read More
  </a>
</div>

<div class="fullText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

---

/* JavaScript */
/* @jsx DOM */
var component = React.createClass({

  getInitialState: function() {
    return {
      expanded: false
    };
  },

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

  render: function() {
    return (
      <div>

      </div>
    );
  }

});

I am new to React. I am not sure how to handle everything inside the render method. How can I implement this functionality in pure React?

Answer 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 {
          return null;
        }
    }
});

and your render function should become:

render: function() {
     var expandedDiv = this.getMoreTextDiv();
     return (
         <div>
             <a onClick={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.