Disable react native classes on pressing a different class in the same group - class

Question

I am completely new to react, Using TouchableHighlight, I have created a class,
import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
render() {
return (
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
>
<View
style={{
marginRight: this.props.mr,
borderRadius: 3,
backgroundColor: "#ffffff",
borderWidth: 0.7,
borderColor: "#e1e1e1",
}}
>
<View style={{ flexDirection: "row", padding: 8 }}>
<Image
style={{
width: 26,
height: 26
}}
source={this.props.typeImage}
/>
<Text
style={{
fontSize: 13,
alignSelf: "center",
marginLeft: 8,
color: "#737f8d"
}}
>
{this.props.type}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
}
I have imported ChooseProComp class in a different component like this, I am not sure whether I have to add a custom method.
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
type="Medical"
onPress={() => this.renderType("Medical")
}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
type="Dental"
onPress={() => this.renderType("Dental")}
/>
</View>
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
type="Homeopathy"
onPress={() => this.renderType("Homeopathy")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
type="Ayurveda"
onPress={() => this.renderType("Ayurveda")}
/>
</View>
<View
style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
type="Yogic science"
onPress={() => this.renderType("Yogic science")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
type="Unani"
onPress={() => this.renderType("Unani")}
/>
</View>
So when I select a particular type, like Medical, I want to disable the ChooseProComp classes of other types. Please help me with this. Other types opacity needs to be decreased as well.

Answer 1

Since it seems you just want one item (<ChooseProComp>) to be selected, I suggest you to simply handle the selected one in your main component state, which at the beginning will be undefined:
state = {
selected: undefined
};
Then define onPress function of each <ChooseProComp> like:
onPress={() => {
this.renderType("Medical"); // I don't know how this works so I won't modify it
if(!this.state.selected){ // if the state is undefined, then set it!
this.setState({
selected: "Medical"
})
}
}
Then, again for each <ChooseProComp> pass a prop disabled like:
<ChooseProComp
...
disabled={this.state.selected && this.state.selected !== 'Medical'}
/>
So, in <ChooseProComp> component (class) you can use it in <TouchableHighlight>:
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
disabled={this.props.disabled}
>
Let me know if this fits your question, or I've misunderstood, or it's not clear enough!