How to integrate React Rating w Redux Form - reactjs

Question

I'm interested in using React Rating to allow my users to provide 1-5 star reviews.
The Rating component renders fine like so:
<Rating />
I would like this Rating ability to appear within react redux-form. How can I integrate Rating within my existing form which has fields like so:
let fields = {}
const fieldoptions = {
type: 'select',
options: [
{},
{ label: '1', value: '1' },
{ label: '2', value: '2' },
{ label: '3', value: '3' },
{ label: '4', value: '4' },
{ label: '5', value: '5' },
]
};
....
const renderField = ({input, field, label, meta: {submitFailed, touched, error, pristine}}) => {
const { type, placeholder } = field
if (type === 'text' || type === 'email' || type === 'number' || type === 'checkbox') {
return <input {...input} placeholder={placeholder} type={type} />
} else if (type === 'select') {
const { options } = field
return (
<div className={classNames("form-group", {
"has-danger": (submitFailed && error) || (!pristine && touched && error),
"has-success": !pristine && touched && !error
})}>
<label>{field.name}</label>
<div>
<select name={field.skill_id} onChange={input.onChange} className={touched ? (error ? "form-control form-control-danger" : "form-control form-control-success") : "form-control"}>
{options.map((option, index) => {
return <option key={index} value={option.value}>{option.label}</option>
})}
</select>
{touched && error && <span className="form-control-feedback">{label} {error}</span>}
</div>
</div>
)
} else {
return <div>Type not supported.</div>
}
}
{this.props.fields.map(field => (
<div key={field.skill_id}>
<Field
name={ 'skill_id_' + field.skill_id }
component={renderField}
field={field}
/>
</div>
))}

Answer 1

You can integrate react-rating with redux form as shown below. Working sample at https://jsfiddle.net/sherin81/d82a1tao/ - The values are logged in console on click on the submit button.
class Page extends Component {
constructor(props) {
super(props)
this.renderField = this.renderField.bind(this)
}
renderField({ input, type }) {
if(type=== 'text') {
return (<input {...input} type={type} />)
} else {
return (<div><Rating {...input} initialRate={parseInt(input.value)} /></div>)
}
}
render() {
const { handleSubmit, onSubmit } = this.props
return (
<div>
<Field
name="rating"
component={this.renderField}
/>
<Field
name="name"
type="text"
component={this.renderField}
/>
<button type="submit" onClick={handleSubmit(onSubmit)}>Submit</button>
</div>
)
}
}
const MyTextFields = reduxForm({
form: 'Page'
})(Page)
The initial values can be set as shown below.
<MyTextFields initialValues={{ rating: 2, name: 'test' }} onSubmit={(values) => console.log(values)} />