Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The source code for the redux form tutorial on davidmeents.com
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../actions';
const form = reduxForm({
form: 'ReduxFormTutorial',
validate
});
const renderField = field => (
<div>
<input {...field.input}/>
{field.touched && field.error && <div className="error">{field.error}</div>}
</div>
);
class ReduxFormTutorial extends Component {
componentDidMount() {
this.handleInitialize();
}
handleInitialize() {
const initData = {
"firstName": this.props.currentUser.firstName,
"lastName": this.props.currentUser.lastName,
"sex": this.props.currentUser.sex,
"email": this.props.userEmail,
"phoneNumber": this.props.currentUser.phoneNumber
};
this.props.initialize(initData);
}
handleFormSubmit(formProps) {
this.props.submitFormAction(formProps);
}
render(
const { handleSubmit } = this.props;
return (
<div>
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<label>First Name:</label>
<Field name="firstName" type="text" component={renderField}/>
<label>Last Name:</label>
<Field name="lastName" type="text" component={renderField}/>
<label>Gender:</label>
<Field name="sex" component="select">
<option></option>
<option name="Male">Male</option>
<option name="Female">Female</option>
</Field>
<label>Email:</label>
<Field name="email" type="email" component={renderField} />
<label>Phone:</label>
<Field name="phoneNumber" type="tel" component={renderField}/>
<button action="submit">Save changes</button>
</form>
</div>
)
)
}
function validate(formProps) {
const errors = {};
if (!formProps.firstName) {
errors.firstName = 'Please enter a first name';
}
if (!formProps.lastName) {
errors.lastName = 'Please enter a last name';
}
if (!formProps.email) {
errors.email = 'Please enter an email';
}
if (!formProps.phoneNumber) {
errors.phoneNumber = 'Please enter a phone number'
}
return errors;
}
function mapStateToProps(state) {
return {
user: state.user
};
}
export default connect(mapStateToProps, actions)(form(ReduxFormTutorial));
@frantisek-lechner

This comment has been minimized.

Show comment Hide comment
@frantisek-lechner

frantisek-lechner Aug 10, 2016

Could you add a definition of actions please?

Could you add a definition of actions please?

@shawnsnyder

This comment has been minimized.

Show comment Hide comment
@shawnsnyder

shawnsnyder Sep 1, 2016

does this get through babel for you? the open paren has me confused on line 41. not sure if this is some sort of of es2018 sugar or something.

does this get through babel for you? the open paren has me confused on line 41. not sure if this is some sort of of es2018 sugar or something.

@vivekkumar1989

This comment has been minimized.

Show comment Hide comment
@vivekkumar1989

vivekkumar1989 Sep 23, 2016

I tried to use this but i am getting this error handleSubmit is not a function.

I tried to use this but i am getting this error handleSubmit is not a function.

@anthonybrown

This comment has been minimized.

Show comment Hide comment
@anthonybrown

anthonybrown Oct 6, 2016

I think there's a typo, should be handleFormSubmit or change the name to handleSubmit?

I think there's a typo, should be handleFormSubmit or change the name to handleSubmit?

@itditp

This comment has been minimized.

Show comment Hide comment
@itditp

itditp Dec 20, 2016

render(){
const { handleSubmit } = this.props;

	return (
		<div>
		<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

		<label>First Name:</label>
		<Field name="firstName" type="text" component={renderField}/>

		<label>Last Name:</label>
		<Field name="lastName" type="text" component={renderField}/>

		<label>Gender:</label>
		<Field name="sex" component="select">
		<option></option>
		<option name="Male">Male</option>
		<option name="Female">Female</option>
		</Field>

		<label>Email:</label>
		<Field name="email" type="email" component={renderField} />

		<label>Phone:</label>
		<Field name="phoneNumber" type="tel" component={renderField}/>

		<button action="submit">Save changes</button>
		</form>
		</div>
	);
}

itditp commented Dec 20, 2016

render(){
const { handleSubmit } = this.props;

	return (
		<div>
		<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

		<label>First Name:</label>
		<Field name="firstName" type="text" component={renderField}/>

		<label>Last Name:</label>
		<Field name="lastName" type="text" component={renderField}/>

		<label>Gender:</label>
		<Field name="sex" component="select">
		<option></option>
		<option name="Male">Male</option>
		<option name="Female">Female</option>
		</Field>

		<label>Email:</label>
		<Field name="email" type="email" component={renderField} />

		<label>Phone:</label>
		<Field name="phoneNumber" type="tel" component={renderField}/>

		<button action="submit">Save changes</button>
		</form>
		</div>
	);
}
@Flavien-Pensato

This comment has been minimized.

Show comment Hide comment
@Flavien-Pensato

Flavien-Pensato Dec 22, 2016

Great job dmeents!

I would like to see your actions file about how you use dispatch. Thanks

Flav

Great job dmeents!

I would like to see your actions file about how you use dispatch. Thanks

Flav

@jamesmwali

This comment has been minimized.

Show comment Hide comment
@jamesmwali

jamesmwali May 23, 2017

I tried to use this but i am getting an error saying handleSubmit is not a function.

I tried to use this but i am getting an error saying handleSubmit is not a function.

@jgardezi

This comment has been minimized.

Show comment Hide comment
@jgardezi

jgardezi Feb 1, 2018

Just found another way to initialise form values

const form = reduxForm({ form: 'debitForm', validate, initialValues: { field_name: 'field_initial_value', }, });

jgardezi commented Feb 1, 2018

Just found another way to initialise form values

const form = reduxForm({ form: 'debitForm', validate, initialValues: { field_name: 'field_initial_value', }, });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment