Redux Form Examples

import React, {Component} from 'react';
import {reduxForm, change} from 'redux-form';

var { connect } = require('react-redux');
var { fetchSchoolByID, saveSchool } = require('../../../reducers/school');

export const fields = [ 'TrustID', 'LEAID', 'SchoolTypeId', 'Name', 'HeadTeacher', 'Email', 'Telephone',  'ImagePath', 'Notes' ];

var form = reduxForm({
    form: 'schoolDetails',
    fields: fields,
});

var SchoolDetails = React.createClass({
    componentDidMount: function() {
        this.props.fetchSchoolByID(1);
    },
    handleSubmit: function(e){
        e.preventDefault();
        var values = this.props.values;
        this.props.saveSchool(id,values);
    },
    render: function(){
        const {
          fields: {TrustID,LEAID,SchoolTypeId,Name,HeadTeacher,Email,Telephone,ImagePath,Notes},
          handleSubmit,
          resetForm,
          submitting
        } = this.props;

        var school = this.props.school_details;
        return (
            <div>
                <h1>School: {school.Name}</h1>
                <h3>Head: {school.HeadTeacher}</h3>
                <form onSubmit={this.handleSubmit}>
                  <p><label>Name</label></p>
                  <p><input type="text" value={school.Name} {...Name}/></p>
                  <p><label>Head Teacher</label></p>
                  <p><input type="text" value={school.HeadTeacher} {...HeadTeacher}/></p>
                  {this.props.dirty ? <button type="submit">Something changed!</button> : <button disabled type="submit">Nothing to save</button>}
                </form>
            </div>
        );
    }
});

SchoolDetails = connect(
    function mapStateToProps(state) {
        var school = state.school
        return {
            school_details:     school.school_details,
            fetching:           school.fetching,
            error:              school.error,
            saving:             school.saving
        };
    },
    { fetchSchoolByID, saveSchool }
)(form(SchoolDetails));

module.exports = SchoolDetails;