0
206
ViewsHow to validate click one per browser?
How can i reduce raiting to be able to rate only once per browser?
I need to make validation for raiting component in React where client can rate only once per browser.
Here is example of the rating component:
export default function App() {
const [value, setValue] = React.useState(0);
return (
<div>
<Box component="fieldset" mb={3} borderColor="transparent">
<Typography component="legend">Rate</Typography>
<Rating
name="pristine"
value={value}
onClick={(e) => setValue(e.target.value)}
/>
</Box>
</div>
);
}
Here is sandbox link of the component sandbox link
·
Juan Pablo Isaza
1 answers
Answer question0
One possible solution you could think of is to use localStorage
For every user, who has already rate, you then store a boolean to the local storage.
Then next time, it will be validated first
Something like this:
export default function App() {
const [value, setValue] = React.useState(0);
const hasRated = localStorage.getItem("hasRated");
const handleRate = (e) => {
setValue(e.target.value);
localStorage.setItem("hasRated", true);
};
return (
<div>
<Box component="fieldset" mb={3} borderColor="transparent">
<Typography component="legend">Rate</Typography>
<Rating
disabled={hasRated}
name="pristine"
value={value}
onClick={handleRate}
/>
</Box>
</div>
);
}
Please note, that this is only a demonstrated example, so it supposes that you will need to have some improvement based on your needs
Sanbox Example:
·
Juan Pablo Isaza
Report
Answer question