Comments (7)
Uhm... It is weird. I tried this:
<Rating onChange={rate => alert(rate)} />
It simply alerts when the rate changes. It seems to work. Check this codepen. No need to click twice.
from react-rating.
Hey @MrAbalogu, could you try if the new release 1.0.5 solves this issue? I couldn't reproduce your behaviour. Could you give me a reproducible scenario? Nothing fancy. Something that helps me reproduce it, like issue #76.
from react-rating.
I have exactly the same problem. But you're right, @dreyescat. If I try this <Rating onChange={rate => alert(rate)} />
the alert shows me the correct number. But If I put my handleRating function it works wrong... this is my handleRating function
_handleRating = (value) => {
try {
const { rating } = this.state
this.setState({ rating: value })
const movie = this.props.movie
console.log('Rating value in handleRating: ', rating)
console.log('Movie value in handleRating: ', movie)
this.props.onRating({ rating, movie })
} catch (error) {
console.log('error in handleRating: ', error)
}
}
There is a mistake somewhere but I'm not able to find it.
Could you help me?
Thank you in advance.
from react-rating.
@MariaRoblesSpin I think you are showing the previous value, not the current one.
const { rating } = this.state
This statement is assigning the previous rating value to the rating
const variable. The new one is in the value
parameter of the _handleRating
function.
Maybe you think that the next setState
call is updating this local variable... But it isn't.
from react-rating.
I am not sure what you need... But if you want to call a callbag once the setState
has completed I suggest using the componentDidUpdate
method:
componentDidUpdate() {
const { rating } = this.state;
const { movie } = this.props;
this.props.onRating({ rating, movie});
}
_handleRating = (value) => {
this.setState({ rating: value });
}
Check this codesandbox
from react-rating.
Same issue happened to me.
I believe it happens when the onChange
forces a re-render in the Rating component.
Here's a small reproducible example.
from react-rating.
Here's a small reproducible example.
Btw, I managed to solve it by adding the initialRating
:
<Rating onChange={setRate} initialRating={rate} />
from react-rating.
Related Issues (20)
- Initial Rating returns null only renders once
- on version 2.0.1 ReactRating-component onChange-event seems to return always value of initialRating HOT 15
- Error during installation on jenkins HOT 2
- emptySymbol is not hidden when fullSymbol is displayed HOT 9
- Cannot read property 'type' of undefined
- Method comments are switched HOT 1
- Misalignment HOT 4
- Sorry HOT 1
- All touches, even scroll/swipe gestures trigger "onClick" HOT 8
- Warning: Using UNSAFE_componentWillReceiveProps in strict mode is HOT 10
- Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details. HOT 5
- Feature request: Lighter DOM Size HOT 1
- Doesn't work with react 17 HOT 1
- Selection requires double click if onClick method provided HOT 3
- How to add the validation for the rating component HOT 1
- Add option to remove default style
- mixed symbol but react component HOT 1
- Package should be marked as deprecated and a replacement fork nominated HOT 2
- React 18: TS2786: 'Rating' cannot be used as a JSX component. HOT 9
- `@types` dependencies should be in `devDependencies`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-rating.