Redux form: set initial values in functional component

Question

I have a functional/dumb component which has a redux form to update a user. Please find the code below:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { InputText } from './shared';
import { Row, Col, Button } from 'react-bootstrap';

const required = value => (value ? undefined : 'Required');

let UpdateUser = ({ user, handleSubmit }) => (
    <div className="content">
        <form onSubmit={handleSubmit}>
            <Row>
                <Col xs={4} sm={4} md={4}>
                    <Field
                        name="name"
                        component={InputText}
                        type="text"
                        validate={[required]}
                        label="Name"
                    />
                </Col>
            </Row>
            <Row>
                <Col xs={4} sm={4} md={4}>
                    <Button type="submit" className="primary">Submit</Button>
                </Col>
            </Row>
        </form>
    </div>
)

UpdateUser = reduxForm({
    form: 'updateUser'
})(UpdateUser);

export default UpdateUser;

I want to update the default name of the user with the one that is passed to the component i.e. user.name. For example for the code below:

UpdateUser = reduxForm({
    form: 'updateUser',
    initialValues: {
        name: user.name
    }
})(UpdateUser);

it says that user is not defined, as it is not accessible. How do I pass set initial values for a redux form inside a functional component ?

Thanks

Answer 1

You need redux state variables in your form. you need to access those via connect. One way i have done this in the past is by putting the initialValues in the connect function, those props get passed to the child (redux form).

const mapStateToProps = (state) => {
    return {
        ...state.user
        initialValues: {
            name: state.user.name
        }
    };
};

UpdateUser = reduxForm({
    form: 'updateUser'
})(UpdateUser)

export default connect(mapStateToProps)(UpdateUser)