React Form Component example

gistfile1.txt

class FormContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formData: null
        }
    }

    formSubmit = (evt) => {
        const form = evt.target,
            data = {
                name: form.name.value,
                email: form.email.value
            };

        this.setState({ formData: data });
        evt.preventDefault();
    }

    render() {
        return (
            <div>
                <pre>{ JSON.stringify(this.state.formData) }</pre>
                <Form onSubmit={ this.formSubmit }/>
            </div>
        )
    }
}

const Form = (props) => {
    return (
        <form onSubmit={ this.props.onSubmit }>
            <TextInput name="name" />
            <TextInput name="email" />
            <SubmitInput value="submit" />
        </form>
    )
}

const TextInput = (props) => {
    return (
        <div>
            <label htmlFor={ this.props.name }>{ this.props.name }</label>
            <input name={ this.props.name } type={ this.props.type } />
        </div>
    )
}

const SubmitInput = (props) => {
    return (
        <input value={ this.props.value } type="submit" />
    )
}