Created
May 12, 2016 00:44
-
-
Save jbaxleyiii/bd3365d2d79b6ab6e850abffbdacc76e to your computer and use it in GitHub Desktop.
Redux-form and apollo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component} from 'react'; | |
import {reduxForm} from 'redux-form'; | |
import { connect } from 'react-apollo'; | |
// you mutation code | |
@connect({ mapMutationsToProps }) | |
class ContactForm extends Component { | |
onSubmit = (...args) => { | |
const { handleSubmit, mutations } = this.props; | |
mutations['myMutation'](args); | |
} | |
render() { | |
const {fields: {firstName, lastName, email}} = this.props; | |
return ( | |
<form onSubmit={this.onSubmit}> | |
<div> | |
<label>First Name</label> | |
<input type="text" placeholder="First Name" {...firstName}/> | |
</div> | |
<div> | |
<label>Last Name</label> | |
<input type="text" placeholder="Last Name" {...lastName}/> | |
</div> | |
<div> | |
<label>Email</label> | |
<input type="email" placeholder="Email" {...email}/> | |
</div> | |
<button type="submit">Submit</button> | |
</form> | |
); | |
} | |
} | |
ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART! | |
form: 'contact', // a unique name for this form | |
fields: ['firstName', 'lastName', 'email'] // all the fields in your form | |
})(ContactForm); | |
export default ContactForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment