MyComponent.js

import React, {Component, Fragment} from 'react';

export default class MyComponent extends Component{
    
    constructor(props){
        super(props);
        //initial state values
        this.state = {
            name: props.name,
            domain: props.domain
        }
    }
    submit = (ev) =>{
        ev.preventDefault();
        //send the data to the server.. or whatever
        //the data is up to date inside of "this.state"
    }
    click = (ev) => {
        //this code runs before the form onSubmit event
        //we can run other tasks
    }
    updateName = (ev) => {
        let name = ev.target.value;
        //do data validation
        this.setState({name:name});
    }
    updateDomain = (ev) => {
        let domain = ev.target.value;
        //do data validation
        this.setState({domain});
    }
    render(){
        return (
            <Fragment>
                <h1>Main Heading</h1>
                <h2>Sub Heading</h2>
                <form onSubmit={this.submit}>
                    <p>
                        <label>Username</label>
                        <input type="text" value={this.state.name}
                         onChange={this.updateName} />
                    </p>
                    <p>
                        <label>Domain</label>
                        <input type="text" value={this.state.domain} 
                        onChange={this.updateDomain} />
                    </p>
                    <p>
                        <button onClick={this.click} >Update</button>
                    </p>
                </form>
            </Fragment>
        );
    }
}