A simple widget to define conditions (if) in JSX

If.jsx

import React from 'react';

export default class If extends React.Component {

    constructor(props)
    {
        super(props);
        this.state = {condition: this.props.condition};
    }

    componentWillReceiveProps(newProps)
    {
        if (this.props.condition != newProps.condition)
        {
            this.setState({condition: newProps});
        }
    }

    render()
    {
        var result;
        if (this.state.condition)
        {
            result = <span>{this.props.children}</span>;
        } else
        {
            result = <span>{this.props.else}</span>;
        }
        return result;
    }
}


If.propTypes = {
    condition: React.PropTypes.any.isRequired,
    else: React.PropTypes.element.isRequired
};