Gutenberg React Component

change-handlers.js

const inputChangeHandler = ( event ) => {
    let newAttr = {};
    newAttr[event.target.id] = event.target.value;
    setAttributes( newAttr );
};

const changeBold = ( event ) => {
    setAttributes({bold: event.target.value});
};

component.js

import Input from './components/Input';
import Select from './components/Select';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;

registerBlockType( 'learn-gutenberg/ex2-react', {
    title: __( 'Learn Gutenberg Example 2: React', 'learn-gutenberg' ),
    category: 'widgets',
    supportHTML: false,
    attributes: {
        who: {
            selector: 'p',
            attribute: 'who'
        },
        salutation: {
            selector: 'p',
            attribute: 'salutation',
            default: 'Hi'
        },
        bold: {
            selector: 'p',
            attribute: 'bold'
        }
    },
    edit({attributes, setAttributes, className, focus, id}) {

        const inputChangeHandler = ( event ) => {
            let newAttr = {};
            newAttr[event.target.id] = event.target.value;
            setAttributes( newAttr );
        };

        const changeBold = ( event ) => {
            setAttributes({bold: event.target.value});
        };

        return el(
            'div',
            { className: className },
            [
                el(
                    'p',
                    {},
                    attributes.salutation + ' ' + attributes.who
                ),
                el(
                    'p',
                    {},
                    attributes.bold
                ),
                el(
                    'div',
                    {},
                    [
                        el(
                            Select,
                            {
                                id: 'bold',
                                changeHandler: changeBold
                            }
                        )
                    ]
                ),
                el(
                    'div',
                    {},
                    Input( className, 'salutation', attributes.salutation, 'Salutation', inputChangeHandler )
                ),
                el(
                    'div',
                    {},
                    Input( className, 'who', attributes.who, 'Who', inputChangeHandler )
                )
            ]
        );
    },

    save: function({attributes}) {
        if ( 'true' === attributes.bold ) {
            return el(
                'p',
                {
                    who: attributes.who,
                    bold: attributes.bold,
                    salutation: attributes.salutation
                },
                [
                    el(
                        'strong',
                        {},
                        __( 'Hi', 'text-domain' ) + ' ' + attributes.who
                    )
                ]
            );
        }
        return el(
            'p',
            {
                who: attributes.who,
                bold: attributes.bold,
                salutation: attributes.salutation
            },
            __( 'Hi', 'text-domain' ) + ' ' + attributes.who
        );
    }
} );

constructor.js

constructor( props ) {
      super( ...props );
      this.selectCallback = this.selectCallback.bind(this);
      this.state = {
          current_editing: 'The bold attribute has NOT been changed',
          change_time: 0
      }
  }

Input-es5.js

var __ = wp.i18n;
var el = wp.element.createElement;

function Input( className, id, value, label, changeHandler ) {
    return el(
        'div',
        {
            className: className
        },
        [
            el(
                'label',
                {
                    htmlFor: id
                },
                __( label + '?', 'text-domain' )
            ),
            el(
                'input',
                {
                    id: id,
                    type: "text",
                    onChange: changeHandler,
                    value: value,
                    label: label
                }
            )
        ]
    )
}

Input.esNext.js

const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;

export default function Input( className, id, value, label, changeHandler ) {
    return el(
        'div',
        {
            className: className
        },
        [
            el(
                'label',
                {
                    htmlFor: id
                },
                __( label + '?', 'text-domain' )
            ),
            el(
                'input',
                {
                    id: id,
                    type: "text",
                    onChange: changeHandler,
                    value: value,
                    label: label
                }
            )
        ]
    )
}

Input.esNextReact.js

const { __ } = wp.i18n;
import React from 'react';
const el = React.createElement;

export default function Input( className, id, value, label, changeHandler ) {
    return el(
        'div',
        {
            className: className
        },
        [
            el(
                'label',
                {
                    htmlFor: id
                },
                __( label + '?', 'text-domain' )
            ),
            el(
                'input',
                {
                    id: id,
                    type: "text",
                    onChange: changeHandler,
                    value: value,
                    label: label
                }
            )
        ]
    )
}

label.js

el(
    'label',
    {
        htmlFor: this.props.id
    },
    this.props.label
);

Select.esNextReact.js

const { __ } = wp.i18n;
import React from 'react';
const el = React.createElement;

export default class Select extends React.Component {

    constructor( props ) {
        super( ...arguments );
    }

    render() {
        return el(
            'div',
            {
                className: this.props.className,
            },
            [
                el(
                    'label',
                    {
                        htmlFor: this.props.id
                    },
                    this.props.label
                ),
                el(
                    'select',
                    {
                        onChange: this.props.changeHandler,
                        id: this.props.id,
                        value: this.props.value
                    },
                    [
                        el(
                            'option',
                            {
                                value: 'true'
                            },
                            __( 'Bold On', 'text-domain' )
                        ),
                        el(
                            'option',
                            {
                                value: 'false'
                            },
                            __( 'Bold Off', 'text-domain' )
                        )
                    ]
                )
            ],

        );


    }
}

Select.esNextWp.js

const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;

export default class Select extends Component {

    constructor( props ) {
        super( ...arguments );
    }

    render() {
        return el(
            'div',
            {
                className: this.props.className,
                value: this.props.value
            },
            [
                el(
                    'label',
                    {
                        htmlFor: this.props.id
                    },
                    this.props.label
                ),
                el(
                    'select',
                    {
                        onChange: this.props.changeHandler,
                        id: this.props.id
                    },
                    [
                        el(
                            'option',
                            {
                                value: 'true'
                            },
                            __( 'Bold On', 'text-domain' )
                        ),
                        el(
                            'option',
                            {
                                value: 'false'
                            },
                            __( 'Bold Off', 'text-domain' )
                        )
                    ]
                )
            ],

        );


    }
}

select.js

el(
    'select',
    {
        onChange: this.props.changeHandler,
        id: this.props.id,
        value: this.props.value
    },
    [
        el(
            'option',
            {
                value: 'true'
            },
            __( 'Bold On', 'text-domain' )
        ),
        el(
            'option',
            {
                value: 'false'
            },
            __( 'Bold Off', 'text-domain' )
        )
    ]
);