Skip to content

Instantly share code, notes, and snippets.

@johhansantana
Last active August 18, 2017 18:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johhansantana/567aff923bef1e34a8d253f5680cdeb1 to your computer and use it in GitHub Desktop.
Save johhansantana/567aff923bef1e34a8d253f5680cdeb1 to your computer and use it in GitHub Desktop.
Get initial values from redux store with redux form with bootstrap
import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
const required = value => (value ? undefined : 'Requerido')
let ConcursoForm = props => {
const { handleSubmit, submitting, invalid } = props
return (
<form onSubmit={ handleSubmit }>
<Field
name="url"
label="Url"
component={renderField}
validate={required}
/>
<button
type="submit"
className="btn btn-primary"
disabled={invalid || submitting}
>
Guardar cambios
</button>
</form>
)
}
const renderField = (field) => (
<div className="form-group">
<label htmlFor={field.input.name}>{field.label}</label>
<input
{...field.input}
id={field.input.name}
name={field.input.name}
className={`form-control ${field.meta.touched && field.meta.error ? 'error' : ''}`}
type={field.type}
/>
{field.meta.touched && field.meta.error &&
<span className="error">{field.meta.error}</span>}
</div>
)
const ConcursoFormRedux = reduxForm({
// a unique name for the form
form: 'concursoForm',
enableReinitialize : true
})(ConcursoForm)
// You have to connect() to any reducers that you wish to connect to yourself
const ConcursoFormConnect = connect(
state => ({
initialValues: state.concurso // pull initial values from concurso reducer
})
)(ConcursoFormRedux)
export default ConcursoFormConnect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment