React Component - CustomForm

custom_form.jsx

// Here's a React Component class
class CustomForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            inputText: "Willson"
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(e) {
        const inputText = e.target.value;
        this.setState({ inputText });
    }

    render() {
        return (
            <div className="custom-form">
                <div className="custom-form-header">
                    <p>Hello, {this.state.inputText}</p>
                </div>
                <div className="custom-form-body">
                    <input type="text"
                           value={this.state.inputText}
                           onChange={this.handleInputChange} />
                </div>
            </div>
        );
    }
}

/*
 * I'm assuming that you have React and ReactDOM available, as well as
 * a HTML element with an id of "root".
 * The return value of ReactDOM.render() is the component instance.
 */
var componentInstance = ReactDOM.render(<CustomForm />, document.getElementById("root"));