render()

in 01 - Core/08 - Transferring Props.js [21:53]

• 26 lines of code
• 1 McCabe index (conditional complexity)

  render({ color, className, style, width, height, ...other }) {
    // The rest operator picks off the remaining props that you're not using.
    // The linter analyses this method and notices the JSX spread attribute.
    // Therefore it warns you not to use this.props.propertyName and instead
    // ask you to use destructuring with a rest property.

    var button =
      <button
        {...other}
        className={joinClasses(className, 'FancyButton')}
        style={{ ...style,
          backgroundColor: color,
          padding: 10,
          width: width - 10,
          height: height - 10
        }}
      />;

    /**
     * button.props === {
     *   className: 'test FancyButton',
     *   disabled: true,
     *   style: {
     *     backgroundColor: 'blue',
     *     padding: 10,
     *     width: 90,
     *     height: 40
     *   }
     * }
     */

    return button;
  }