Setting Initial value of field.

Hi, I current having a huge problem with setting an initial value to a field and can’t work out why this is causing me such a problem. I am currently days old into learning redux and redux-form so I am hoping its my inexperience.

So to put it simply, I am trying to set project.name to its initial value of the “name” Field when editing a project but it shows no value. This even happens when I hard code the value in. e.g.

<Field name="name"
           value="tim"
           type="text"
           component={renderField}
           label="Project Name"
           validate={[ required ]}/>

HTML Output:

Full File:

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {createProject, updateProject} from '../actions/projectActionCreators';
import {bindActionCreators} from 'redux';
import { Field, reduxForm, SubmissionError, stopAsyncValidation } from 'redux-form';
import {ErrorsList} from '../components/ErrorsList';
import {Link} from 'react-router';

const required = value => value ? undefined : 'Required';
class EditProject extends Component{
    constructor(props) {
        super(props);
    }
    static contextTypes = {
        router: PropTypes.object
    };
    onSubmit(props){
        props.workspace_id = this.props.workspace.id;
        this.setState({errors: null});
        const then = (response)=> {
            if (response.error){
                this.setState({errors: response.payload.response.data.errors});
            }else {
                this.context.router.push(`/projects/${response.payload.data.id}`);
            }
        };
        if (this.props.params.id){
            props.id = this.props.params.id;
            this.props.updateProject(props);
        } else {
            this.props.createProject(props).then(then);
        }

    }
    showServerErrors(){
        if (this.state && this.state.errors){
            return <ErrorsList errors={this.state.errors}/>
        }
    }
    render(){
        const { handleSubmit } = this.props;
        const project = this.props.params.id ? this.props.workspace.projects.find(p => p.id == this.props.params.id) : null;
        return(
            <div className="row">
                <div className="col-md-4"></div>
                <div className="col-md-4">
                    <h1 className="page-header">{project ? 'Edit' : 'Create' } Project</h1>
                    {this.showServerErrors()}
                    <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                        <Field name="name"
                               value={project ? project.name : ''}
                               type="text"
                               component={renderField}
                               label="Project Name"
                               validate={[ required ]}/>
                        <button type="submit"  className="btn btn-primary" >Submit</button>
                        <Link to="/" className="btn btn-default" style={{marginLeft: 5}}>Cancel</Link>
                    </form>
                </div>
            </div>
        );
    }
}

const validate = values => {
    const errors = {};
    return errors;
}

const renderField = ({ input, label, type, meta: { touched, invalid ,error, warning } }) => {
    return (
        <div className={`form-group has-danger`}>
            <label className="form-control-label">{label}</label>
            <input className={`form-control form-control-danger`} {...input} placeholder={label} type={type}/>
            <div className="text-help text-danger">
                {touched ? error : ''}
            </div>
        </div>
    );
};

function mapStateToProps(state){
    return {
        workspace: state.workspace
    }
}

let formComponent = reduxForm({
    form: 'EditProjectForm',
    validate
})(EditProject);

export default connect(mapStateToProps, {createProject, updateProject})(formComponent);

[gustavohenke]

You need to use initialValues prop. For example, in your mapStateToProps function, include a key initialValues in your returned object with the value { name: 'blabla' } }, and your field will initialize with the value blabla 😮

Please note that this issue doesn’t belong to our GitHub issue tracker, so in the future we request you to ask at StackOverflow, using the redux-form tag.

This is because StackOverflow is better at keeping popular questions visible. The GitHub issue tracker is more suited for discussions related to bugs and improvements of Redux Form.

Thanks for using Redux Form!

[songshansls]

try initialize function componentWillMount () { this.props.initialize({ name: 'blabla' }) }