Setting State

In notebook:
FrontEndMasters React
Created at:
2016-06-14
Updated:
2016-06-14
Tags:
libraries React JavaScript
Let's make a content toggler. 
Will use the new <summary>, <details> HTML5 elements.(Collapsable widget)
How do we pass child elements to another component? With ​this.props.children​.
  var React = require('react');

var ContentToggle = React.createClass({
    render () {
        return (
            // need to use className for CSS `class` attribute
            <div className="ContentToggle">
                <div className="ContentToggle__Summary">{this.props.summary}</div>
                // get the child elements of the calling component
                <div className="ContentToggle__Details">{this.props.children}</div>
            </div>
        );
    }
});

var App = React.createClass({
    render () {
        return (
            <div>
                <ContentToggle summary="Jerk Chicken">
                    <p>Description text</p>
                </ContentToggle>
            </div>
        )
    }
});

React.render(<App/>, document.body);
In React you have to use the real DOM node element properties names and not the HTML attributes. So instead of ​<div class="ContentToggle">​ you use ​<div className="ContentToggle">​. 
So instead of ​for​ it's HTMLfor​, ​tabIndex​ instead of ​tabindex​. 
React will usually give you a warning (console) if you don't use the correct property name and propose you the correct one.
Now we need to add interaction. 
  var React = require('react');

var ContentToggle = React.createClass({
    // 3. add getInitialState life-cycle event hook
    getInitialState () {
        return {
            showDetails: true;
        };
    },
    
    
    // 2. ++++ Add renderDetails
    renderDetails () {
        // use this.state for the conditional
        var showStuff = this.state.showDetails;
        if (showStuff) {
            return this.props.children;
        } else {
            return null;
        }
    },
    
    // 5. ++++ adds toggle handler function
    toggle () {
        this.setState({ 
            showDetails: !this.state.showDetails 
        });
    }
    
    render () {
        return (
            <div className="ContentToggle">
                // 4. ++++ add onClick handler to change `showDetails`
                <div onClick={this.toggle} className="ContentToggle__Summary">{this.props.summary}</div>
                // 1. ++-- change this.props.children
                // ---- <div className="ContentToggle__Details">{this.props.children}</div>
                <div className="ContentToggle__Details">{this.renderDetails()}</div>
            </div>
        );
    }
});

var App = React.createClass({
    render () {
        return (
            <div>
                <ContentToggle summary="Jerk Chicken">
                    <p>Description text</p>
                </ContentToggle>
            </div>
        )
    }
});

React.render(<App/>, document.body);
Introduces ​this.state.showDetails​ to decide the conditional. 
​getInitialState()​ is another life-cycle event hook.