React Functional Component update property change - reactjs

Question

I am using react-star package
import ReactStars from "react-rating-stars-component";
It has one issue.
I need to the value to change on state change. But the value is not changing
I am changing the this.state.rating on ajax load.
and setting the value this.rating to be used in submit.
class CallUpdate extends Component<{ match: PropsWithRef<any> }> {
state = {
rating:0
}
rating = 0;
componentDidMount = async () => {
this.id = this.props.match.params.id;
const userCall = await axios.get(`call/show/${this.id}`);
const call: call= userCall.data.data;
this.setState({
rating: call.rating
});
}
submit = async (e: SyntheticEvent) => {
e.preventDefault();
const formData = new FormData();
formData.append('rating', this.rating);
//const formHeaders['Content-Type'] = 'multipart/form-data';
const config = {headers: {'Content-Type' :'multipart/form-data'}};
await axios.post(`call/${this.id}/update`, formData,config);
}
render() {
return (
<ReactStars
count={5}
value={this.state.rating}
onChange={(rating) => {this.rating = rating}}
size={24}
activeColor="#ffd700"
/>
);
}
}
export default CallUpdate;
////
react-starts-component I have added this function. it should be called on props change.
function updateValue(value){
if (value < 0 || value > count) {
setCurrentValue(0);
}
else {
setCurrentValue(value);
}
}
I tried changing the useEffect
useEffect(() => {
addClassNames();
validateInitialValue(props.value, props.count);
setStars(getStars(props.value));
setConfig(props);
createUniqueness();
setIsUsingIcons(iconsUsed(props));
setHalfStarAt(Math.floor(props.value));
setHalfStarHidden(props.isHalf && props.value % 1 < 0.5);
}, []);
to
useEffect(() => {
addClassNames();
validateInitialValue(props.value, props.count);
setStars(getStars(props.value));
setConfig(props);
createUniqueness();
setIsUsingIcons(iconsUsed(props));
setHalfStarAt(Math.floor(props.value));
setHalfStarHidden(props.isHalf && props.value % 1 < 0.5);
}, [props]);
But on state.rating change it is not updating the value.
How do I change the code to make it property change value?

Answer 1

The issue here is you are not updating the state but instead updating a property on class which doesn't cause a re-render and you are using lead whereas you have a call variable in componentDidMount which doesn't exists. You should use a state variable to hold data that might change overtime and reflect in UI.
class CallUpdate extends Component {
state = {
rating: 0
};
componentDidMount = async () => {
const id = this.props.match.params.id;
const userCall = await axios.get(`call/show/${this.id}`);
const call: call = userCall.data.data;
this.setState({
rating: call.rating
});
};
submit = async (e: SyntheticEvent) => {
e.preventDefault();
const formData = new FormData();
formData.append("rating", this.rating);
//const formHeaders['Content-Type'] = 'multipart/form-data';
const config = { headers: { "Content-Type": "multipart/form-data" } };
await axios.post(`call/${this.id}/update`, formData, config);
};
render() {
return (
<ReactStars
count={5}
value={this.state.rating}
onChange={(rating) => this.setState({rating})}
size={24}
activeColor="#ffd700"
/>
);
}
}

Answer 2

I had the same problem when value not updating from useMemo(). You just need to add key prop to ReactStars: key={value}