Reactjs stateless function & class components

gistfile1.txt

// Read more:
// https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
// https://facebook.github.io/react/docs/component-specs.html
// https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.mwedhclq7
// https://github.com/ghengeveld/react-redux-styleguide

// ES6 react class stateless component
import React, {PropTypes} from 'react'

export default class Link extends React.Component {

    static propTypes = {
        active: PropTypes.bool.isRequired,
        children: PropTypes.node.isRequired,
        onClick: PropTypes.func.isRequired
    };

    clickAction(event) {
        event.preventDefault();
        this.props.onClick();
    }

    render() {
        let content;
        if (this.props.active) {
            content = <span>{this.props.children}</span>
        } else {
            content = (
                <a href="#" onClick={this.clickAction.bind(this)}>
                    {this.props.children}
                </a>);
        }
        return content
    }
}

// Functional Stateless "component"

import React, {PropTypes} from 'react'

const Link = ({active, children, onClick}) => {

    let clickAction = () => {
        e.preventDefault();
        onClick()
    };

    if (active) {
        return <span>{children}</span>
    }

    return (
        <a href="#" onClick={e => clickAction(e)}>
            {children}
        </a>
    )
};

Link.propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.node.isRequired,
    onClick: PropTypes.func.isRequired
};

export default Link;