How to show rating value on full/rating symbol.

[MakarovAV]

I want to create a rating labelled with numbers of corresponding rate. Something like this: [1][2][3][4] "empty" and "full" elements are custom React components, so I am using component this way:

<Rating 
    start = {0}
    stop = {4}
    onChange = {rate => this.applyRate(rate, index)}
    empty = {<EmptyRating/>}
    full  = {<FullRating/>}
 />

But I cant figure out how to access corresponding rate number from my "EmptyRating" and "FullRating" components. Is there any way to achieve it?

[dreyescat]

I am not sure to understand what you mean... Are your <EmtpyRating/> and <FullRating/> also Rating components?

Do you mean having a rating where the symbols correspond to the rate number they represent? For example, a rating of 4 would be something like this:

[1] [2] [3] [4]

Then, for example, selecting 3 rate would appear like this:

[*] [*] [*] [4]

Or just changing the color of the rate to another color.

[MakarovAV]

Are your <EmtpyRating/> and <FullRating/> also Rating components?

No, just my custom components

Do you mean having a rating where the symbols correspond to the rate number they represent?

yes

At the moment I already checked the source and unfortunately did not found this feature "from the box".

As quick and very dirty workaround I created an array of my components

var emptyArr =  [<EmptyRating index={1}/>, <EmptyRating index={2}>]
<Rating 
    empty = {<EmptyRating/>}
 />

It is working, but now I have console warning.

Warning: Failed prop type: Invalid prop empty supplied to Rating

[dreyescat]

You can pass an array of symbols to empty and full properties. It is OK. It is the way to customize each and every one of the symbols at your will.

I suppose you meant:

var emptyArr =  [<EmptyRating index={1}/>, <EmptyRating index={2}>]
<Rating 
    empty = {emptyArr}
 />

Mind the empty property. Right?

BTW: A quick example with numerical react span components as symbols.

<Rating start={0} stop={4}
  empty={[1,2,3,4].map(n => <span className="icon-text">{n}</span>)}
  full={[1,2,3,4].map(n => <span className="icon-text icon-selected">{n}</span>)}
  />

Check the jsfiddle

[dreyescat]

Ah! And regarding the warning:

Warning: Failed prop type: Invalid prop empty supplied to Rating

This is probably because of how propTypes are defined for empty and full properties. Right now they only consider having an array of strings or objects. And maybe a React element is not considered an object.

Should not be an issue because it is only a propTypes complain. I will look into it later. If you want you can play around with React.PropTypes. The part where types are defined is here.

[MakarovAV]

I suppose you meant:

Yeah, misstyped)

It is OK.

It is ok cause it works, but It seems kinda clumsy for me. I expected corresponding rate to be passed into react component.

A quick example with numerical react span components as symbols.

It is a bit more complicated in my case, but thanks for help)

And maybe a React element is not considered an object.

Yes, there is React.PropTypes.element

[dreyescat]

It is ok cause it works, but It seems kinda clumsy for me. I expected corresponding rate to be passed into react component.

Yep, it works because this is the way it was designed to work. For your use case it might seem clumsy because you are using exactly the same symbol with different rates. But, you could use a completely different symbol for each rate, regardless the rate. I mean a star, a heart, a circle, and a thumb up. All them in the same rating.

Another thing is that we could add a way to make it easier to solve this use case, that might be more frequent than having a mix of different ones. Or even better. We could move this decission to the user through a function. I mean, passing a function to the empty, full, and placeholder that will allow the caller to customize the symbol. Sort of symbol builder. This function could pass the rate and/or index as parameter allowing you to decide what symbol to show in each case. This is just a brainstorm but I will look into this option. I feel that it could increase the flexibility a lot.