I'm working on a react native project and I'm really new to this technology.
I have a dynamic list (data fetching from the server). Each item on that list has two buttons, "YES" and "NO" as follows
Scenario: If the user clicks the "YES" button that needs to be highlighted in green color, otherwise user clicked on the "NO" button style pick should be added to the "NO" button. Likewise, the user can select multiple buttons in that list as follows.
My problem is, Now If I select one button from my list, that color will appear to the complete list as follows. If 1st item "YES" button selected all the YES buttons will be displayed as follows.
I did lots of code changes to fix this issue, but they did not work for me.
I have added my code below, Please let me know where it is going wrong. Thanks in advance.
checkList.tsx
const [isYesButtonEnabled, setIsYesButtonEnabled] = useState(false);
const [isNoButtonEnabled, setIsNoButtonEnabled] = useState(false);
const [checkLisItems, setCheckListItems] = useState({
isLoading: true,
checklistData: null,
});
const yesClicked = () => {
setIsYesButtonEnabled(true);
setIsNoButtonEnabled(false);
}
const noClicked = () => {
setIsYesButtonEnabled(false);
setIsNoButtonEnabled(true);
}
<View style={{ flex: 4 }}>
<FlatList
showsHorizontalScrollIndicator={false}
data={checkLisItems.checklistData}
renderItem={({ item }) => {
return (
<InspectionCheckListItem
itemData={item}
yesClicked={() => yesClicked()}
noClicked={() => noClicked()}
isYesButtonEnabled={isYesButtonEnabled}
isNoButtonEnabled={isNoButtonEnabled}
/>
);
}}
keyExtractor={item => `${item.chelistid}`}
/>
</View>
InsprctionCheckListRow.tsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import { COLORS, FONT_FAMILY } from '../../../../constants/Component.styles';
type props = {
isYesButtonEnabled?: boolean;
isNoButtonEnabled?: boolean;
yesClicked?: () => void;
noClicked?: () => void;
}
const InsprctionCheckListItem = props => {
return (
<View style={styles.container}>
<View style={{ flex: 1, alignSelf: 'center' }} >
<Text style={styles.allText}>{props.itemData.checklistName}</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', alignSelf: 'center', justifyContent: 'center' }} >
<TouchableOpacity style={props.isYesButtonEnabled ? styles.touchButtonClicked : styles.touchButton} onPress={props.yesClicked}>
<Text style={styles.touchButtonWithoutClick}>YES</Text>
</TouchableOpacity>
<TouchableOpacity style={props.isNoButtonEnabled ? styles.touchButtonClicked : styles.touchButton} onPress={props.noClicked}>
<Text style={styles.touchButtonWithoutClick}>NO</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }} >
<TextInput style={styles.textInput} onChangeText={props.changedText} defaultValue={props.itemData.remark}/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
marginTop: '3%',
},
allText: {
fontSize: 20,
color: COLORS.BLUE_2C,
fontFamily: FONT_FAMILY.LIGHT,
justifyContent: 'center',
alignSelf: 'center'
},
textInput: {
fontSize: 20,
color: COLORS.BLUE_2C,
fontFamily: FONT_FAMILY.LIGHT,
borderWidth: 0.5,
borderRadius: 5,
borderColor: COLORS.BLUE_69,
backgroundColor: 'rgba(0,0,0,0)',
},
touchButton: {
width: 80,
height: 40,
borderRadius: 5,
borderWidth: 0.8,
borderColor: COLORS.ASH_AE,
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'center',
margin: '0.2%',
backgroundColor: COLORS.ASH_AE,
},
touchButtonClicked: {
width: 80,
height: 40,
borderRadius: 5,
borderWidth: 0.8,
borderColor: COLORS.PINK,
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'center',
backgroundColor: COLORS.PINK,
},
touchButtonWithoutClick: {
fontSize: 14,
color: COLORS.WHITE,
fontFamily: FONT_FAMILY.LIGHT,
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'center'
}
});
export default InsprctionCheckListItem;
Sample Server Response
"ChecklistsItem": [
{
"chelistid": 123,
"ireqstId": 12,
"checklistName": "Name and address of the pharmacy",
"validity": "Valid",
"remark": null
}
],