How to set state of different properties? - react-native

Question

I am new to react native. i am using 'react-native-ratings' library for the star rating, and i have 3 places where i am using rating component but don't know how to set state of the property for each of the views.
Here is the code below, i want to update technicalRating, analyticalRating, commRating:
export class Feedback extends Component {
constructor(props) {
super(props);
this.state = {
technicalRating: '',
analyticalRating: '',
commRating:'',
}
}
render() {
return (
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Technical Skills*</Text>
</View>
<RatingView />
</View>
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Analytical Skills*</Text>
</View>
<RatingView />
</View>
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Communication*</Text>
</View>
<RatingView />
</View>
}
}
export class RatingView extends Component {
ratingCompleted(rating) {
console.log("Rating is: " + rating)
}
render() {
return <Rating
showRating
onFinishRating={this.ratingCompleted}
style={{ marginRight: 10, marginTop: 6 }}
fractions={1}
imageSize={20}
showRating={false}
startingValue={0}
/>
}
}
Thanks in advance.

Answer 1

Try below code :
export class Feedback extends Component {
constructor(props) {
super(props);
this.state = {
technicalRating: '',
analyticalRating: '',
commRating:'',
}
}
onTechnicalRatingCom =() => {
//you code that you want to run after technical skill rating complete
}
onAnaliticalRatingCom = () => {
// you code that you want to run after analitical skill rating complete
}
onCommunicationRatingCom = () => {
// you code that you want to run after communication skill rating complete
}
render() {
return (
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Technical Skills*</Text>
</View>
<RatingView onRatingCompleted={this.onTechnicalRatingCom} />
</View>
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Analytical Skills*</Text>
</View>
<RatingView onRatingCompleted={this.onAnaliticalRatingCom} />
</View>
<View style={styles.row}>
<View style={styles.view}>
<Text style={styles.skillsText}>Communication*</Text>
</View>
<RatingView onRatingCompleted={this.onCommunicationRatingCom} />
</View>
)
}
}
export class RatingView extends Component {
constructor(props) {
super(props);
}
render() {
return <Rating
showRating
onFinishRating={this.props.onRatingCompleted}
style={{ marginRight: 10, marginTop: 6 }}
fractions={1}
imageSize={20}
showRating={false}
startingValue={0}
/>
}
}