React with redux - react-rating with redux-form

Question

I am trying to implement a simple form, where user can rate a post while posting a comment. I found react-rating on github and wanted to use it in my redux-form .

I place my StarRating component

<StarRating onChange={(value) => { this.changeRate("rating", value) } }/>

and hidden Field inside my form with name set to "rating"

<Field component="input" type="hidden" name="rating"/>

Function called changeRate is meant to change the value of the hidden field inside my form to the value after clickinf on the stars.

changeRate(name, value) {
    this.props.change(name, value) // function provided by redux-form
}

When I click for the first time on the rating the value of the inpute changes, but the selected stars disappears. After clicking for the second time the stars stay selected.

I tried to change the value of the hidden field using jQuery. - selecting the stars worked properly but the field value was not included inside the redux-form when posting. Combining jQuery and change function gives the same result as with no jQuery.

What might be causing this?

Answer 1

First of all, you will need some dynamic props to represent the number of stars that is changing in your starRating component, and not only the onChange callback like you did. Something like that:

<StarRating 
  onChange={(value) => { this.changeRate("name", value) } }
  initialRate={ this.state.starRating }
/>

You will need to adapt your function to also change the local state that represent the stars numbers. Something like that:

changeRate(name, value) {
    this.props.change(name, value) // function provided by redux-form
    this.setState({ starRating: value })
}

Answer 2

A bit late to write this but isn't it better to do a custom component and reuse it wherever you like instead of hiding the Field component each time? You can use either react-stars or react-rating.

RenderRatingField.js

//custom Component
import React, {Component} from "react";
import ReactStars from "react-stars";

export class RenderRatingField extends Component {
  render() {
    const {
      label,
      name,
      topTxt,
      starCount,
      input: { value, onChange },
      starSize,
      starsColor,
      meta: { touched, error }
    } = this.props;

    return (
      <div>
        <label>{label}</label>
        <div>
            <label>
              <div className="col-lg-12">
                <h1>{topTxt}</h1>
                <ReactStars
                  count={starCount}
                  value={value === "" ? this.props.initialStars : value}
                  onChange={onChange}
                  size={starSize}
                  color2={starsColor}
                />
              </div>
              {touched && error && <span>{error}</span>}
            </label>
        </div>
      </div>
    );
  }
}

MainComponent.js

//usage
 <Field
  name="myStars"
  initialStars={0}
  starCount={5}
  type="number"
  starSize={24}
  topTxt={'My Stars'} 
  starsColor={"#f00"}
  component={RenderRatingField} />