React Form Submission - Fields Always Empty

Question

I'm struggling to figure out how we're supposed to handle submitting a form in React. First time user, failed hard so far.

The data in the form is always empty meaning the json is also empty.

As far as I can tell from all the examples I've read this should be working.

My component is a simple registration component:

import * as React from 'react';
import { PropsType } from './Routes';
import { Form, Col, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';

export default class Register extends React.Component<PropsType, any> {

    public constructor(props, context) {
        super(props, context);

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

    public render() {

        return <Form horizontal onSubmit={this.handleSubmit} id={'reg-form'}>
                   <FormGroup controlId="formHEmail">
                       <Col componentClass={ControlLabel} sm={2}>
                           Email
                       </Col>
                       <Col sm={10}>
                           <FormControl type="email" placeholder="Email" />
                       </Col>
                   </FormGroup>

                   <FormGroup controlId="formPassword">
                       <Col componentClass={ControlLabel} sm={2}>
                           Password
                       </Col>
                       <Col sm={10}>
                           <FormControl type="password" placeholder="Password" />
                       </Col>
                   </FormGroup>

                   <FormGroup controlId="formConfirmPassword">
                       <Col componentClass={ControlLabel} sm={2}>
                           Confirm Password
                       </Col>
                       <Col sm={10}>
                           <FormControl type="password" placeholder="Confirm Password" />
                       </Col>
                   </FormGroup>

                   <FormGroup>
                       <Col smOffset={2} sm={10}>
                           <Button type="submit">Create Account</Button>
                       </Col>
                   </FormGroup>
               </Form>;
    }

    public handleSubmit(e) {
        e.preventDefault();

        console.log('Register.POST');

        console.log('TARGET IS: ' + e.target);

        const data = new FormData(e.target);
        console.log(data);

        const json = JSON.stringify(data);
        console.log(json);

        fetch('/api/account/register', {
            method: 'POST',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Accept': 'application/json',                  
            },
            body: json,
        }).then(res => {
            console.log(res);
        });
    }
}

How can I get the values from the form into json data?

Answer 1

You need to add value to FormControl to let it know what value to render.

And add onChange to let it know what to do when DOM input change. Here we update state.email value so FormControl will receive new value prop and rerender with updated email. You can do the same with other inputs.

We also add name prop which is value of event.target.name to know which field to update, so we don't have to create duplicated handle function for each input.

public constructor(props, context) {
    super(props, context);
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmailChange = this.handleChange.bind(this);
}

public handleChange (event) {
    this.setState({ [event.target.name]: event.target.value });
}

public handleSubmit() {
    console.log(this.state); // Your json data is here
}

public render() {

        return <Form horizontal onSubmit={this.handleSubmit} id={'reg-form'}>
                   <FormGroup controlId="formHEmail">
                       <Col componentClass={ControlLabel} sm={2}>
                           Email
                       </Col>
                       <Col sm={10}>
                           <FormControl
                               type="email"
                               name="email"
                               placeholder="Email" />
                               value={this.state.email}
                               onChange={this.handleChange}
                       </Col>
                   </FormGroup>
               </Form>
        }
    }
}