React redux form handle submit returns empty object

Question

I've been learning react redux forms from https://redux-form.com/8.3.0/examples/simple/

As shown in the example I have created my form as below

import React, { Component } from 'react';
import { Button, Label, Col, Row } from 'reactstrap';
import { LocalForm, Field } from 'react-redux-form';

class Contact extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(values) {
        console.log(values);
    }
    render() {
        return (
            <div className="container">
                <div className='row row-content'>
                    <div className='col-12'>
                        <h3>Send us Your Feedback</h3>
                    </div>
                    <div className='col-12 col-md-9'>
                        <LocalForm onSubmit={(values) => this.handleSubmit(values)}>
                            <Row className="form-group">
                                <Label htmlFor="firstname" md={2}>First Name</Label>
                                <Col md={10}>
                                    <Field model=".firstname" id="firstname" name="firstname"
                                        placeholder="First Name"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="lastname" md={2}>Last Name</Label>
                                <Col md={10}>
                                    <Field model=".lastname" id="lastname" name="lastname"
                                        placeholder="Last Name"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="telnum" md={2}>Contact Tel.</Label>
                                <Col md={10}>
                                    <Field model=".telnum" id="telnum" name="telnum"
                                        placeholder="Tel. Number"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="email" md={2}>Email</Label>
                                <Col md={10}>
                                    <Field model=".email" id="email" name="email"
                                        placeholder="Email" component="input"
                                        className="form-control" />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Col md={{ size: 6, offset: 2 }}>
                                    <div className="form-check">
                                        <Field model=".agree" name="agree"
                                            className="form-check-input"
                                            type="checkbox" component="input"
                                        /> {' '}
                                        <strong>May we contact you?</strong>
                                    </div>
                                </Col>
                                <Col md={{ size: 3, offset: 1 }}>
                                    <Field model=".contactType" name="contactType"
                                        className="form-control" component="select">
                                        <option>Tel.</option>
                                        <option>Email</option>
                                    </Field>
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="message" md={2}>Your Feedback</Label>
                                <Col md={10}>
                                    <Field model=".message" id="message" name="message"
                                        rows="12" component="textarea"
                                        className="form-control" />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Col md={{ size: 10, offset: 2 }}>
                                    <Button type="submit" color="primary">
                                        Send Feedback
                                    </Button>
                                </Col>
                            </Row>
                        </LocalForm>

                    </div>
                </div>
            </div >
        );
    }
}

export default Contact;

After entering the values when I click Submit button in the handleSubmit() it is showing empty object. Kindly help me to fix this! Thank you.

Answer 1

You need to export it as shown in example

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm)

Addition to this which value are you passing in handleSubmit? redux-form gets the value directly from Field

And for using this you need to have your redux store setup with react-redux-form. And as suggested by author itself if you are starting project don't use react-redux-form instead use React Final Form