voronianski / react-star-rating-component

Basic React component for star (or any other icon based) rating elements
http://voronianski.github.io/react-star-rating-component/example
MIT License
379 stars 77 forks source link

React error - StarRatingComponent.render(): A valid React element (or null) must be returned. #36

Closed annaarun123 closed 6 years ago

annaarun123 commented 7 years ago

This error is happening only when I render this in server-side (i.e. refresh the page) and the page keeps spinning. Using client-side rendering works fine.

{ [Invariant Violation: Minified React error #109; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=StarRatingComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings.] name: 'Invariant Violation', framesToPop: 1 }

The decoded error message is: StarRatingComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Could someone check this and help.

code:

export const renderStars = (rating, styles) => {
  return (<StarRatingComponent
    name="ratingStar"
    starCount={5}
    value={rating}
    editing={false}
    starColor='#FFFFFF'
    emptyStarColor='#ea9a00'
    className={styles.ratingStars}
    onStarClick={() => {return false;}}
    renderStarIcon={(index, value) => {
      return (<div className={styles.starOrange}>
        <i className={index <= value ? `fa fa-star ${styles.fullStarWhite}` : `fa fa-star-o ${styles.emptyStarOrange}`} />
      </div>);
    }}
    renderStarIconHalf={() => <div className={styles.starOrange}>
      <i className={"fa fa-star-half-full"} />
    </div>}
  />);
};
voronianski commented 6 years ago

fixed in 1.4.1