ReactJS: Button

This entry is part 24 of 35 in the series React JS

See the Pen React Button by Trenton (@trentontri) on CodePen.0

/*
 * A simple React component
 * Properties include: href, icon, disabled, and className
 */
class Button extends React.Component {

  render() {
    const { children, className, href, icon, ...others } = this.props;
    const props = { ...others, href, className, ref: 'button', disabled: this.props.disabled };
    const element = href ? 'a' : 'button';

    return React.createElement(
      element, props, icon ? <i className={this.props.icon} /> : null, children
    );
  }
}

/*
 * Render the above component into the div#react-button
 */
ReactDOM.render(
  <div>
    <Button className="btn-primary">click me</Button>
    <Button className="btn-success" icon="fa fa-phone">success </Button>
    <Button className="btn-success" disabled={true}>disabled </Button>
  </div>, 
  document.getElementById('react-button')
);
Series Navigation<< ReactJS: TextField
ReactJS: Circle >>