const initialData = [
{
id: 1,
name: `${accountList?.brideName} ${accountList?.brideSurname}`,
type: 'Gelin',
selected: false,
tlText: accountList?.brideAccount?.accountTl,
euroText: accountList?.brideAccount?.accountEuro,
dollarText: accountList?.brideAccount?.accountUsd,
accountHolderType: 'BRIDE'
},
{
id: 2,
name: `${accountList?.groomName} ${accountList?.groomSurname}`,
type: 'Damat',
selected: false,
tlText: accountList?.groomAccount?.accountTl,
euroText: accountList?.groomAccount?.accountEuro,
dollarText: accountList?.groomAccount?.accountUsd,
accountHolderType: 'GROOM'
},
{
id: 3,
name: 'Ortak Hesap',
type: 'Gelin & Damat ',
selected: false,
tlText: accountList?.commonAccount?.accountTl,
euroText: accountList?.commonAccount?.accountEuro,
dollarText: accountList?.commonAccount?.accountUsd,
accountHolderType: 'COMMON'
},
]
const [Data1, setData1] = useState<Data[]>(initialData)
Storing data in a state variable like this helps in efficient data management. Here is how the data gets mapped when accessing this state variable:
<ScrollView showsVerticalScrollIndicator={false}>
{Data.map((item, index) => {
console.log('data5 ', accountList?.brideAccount?.accountTl);
return (
<View>
<PressableOpacity
onPress={() => {
setSelectedById(item.id);
console.log('data6 ', accountList?.brideAccount?.accountTl);
}}>
<View
style={{
paddingVertical: responsiveHeight(13),
paddingHorizontal: responsiveWidth(24),
borderBottomWidth: 1,
borderBottomColor: '#F3F3F3',
justifyContent: 'center',
}}>
<Text
style={{
lineHeight: 22,
fontFamily: Fonts.semiBoldRaleway,
fontSize: 14,
letterSpacing: 0.2,
color: '#000',
}}>
{item.name}
</Text>
<Text
style={{
lineHeight: 16,
fontFamily: Fonts.regularPetrona,
fontSize: 10,
letterSpacing: 0.3,
color: '#EA80AA',
}}>
{item.type}
</Text>
<Icon
style={{
position: 'absolute',
right: responsiveWidth(24),
}}
name={
item.selected
? 'chevron-down : feather'
: 'chevron-right : feather'
}
size={20}
color="#061937"
/>
</View>
</PressableOpacity>
{item?.selected && (
<View style={{ paddingHorizontal: responsiveWidth(24) }}>
<Text>{accountList?.brideAccount?.accountTl}</Text>
<CustomInput3 value={item?.name} />
<CustomInput3 leftImage={Images.tlBlack} value={item?.tlText} onChangeText={(value) => handleChangeTl(index, value)} />
<CustomInput3
leftImage={Images.dolarBlack}
value={item?.dollarText}
onChangeText={(value) => handleChangeDollar(index, value)}
/>
<CustomInput3
leftImage={Images.euroBlack}
value={item.euroText}
onChangeText={(value) => handleChangeEuro(index, value)}
/>
<CButton text='Kaydet' onPress={() => {
// console.log(item.accountHolderType)
onSubmit({ weddingCode: weddingC, accountTl: item.tlText, accountEuro: item.euroText, accountUsd: item.dollarText, accountHolderType: item.accountHolderType })
}} />
</View>
)}
</View>
);
})}
One challenge faced is the initial data being undefined upon initiating the modal. Subsequent openings reveal the data. This begs the question of what can be done to view data from the start?
Logging the data initially poses no issues. It seems there may be a state-related problem at play. How can this be resolved?