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)I have a state in which I hold data like this and I map this state as you can see below.
<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> ); })}This is actually a modal component and when I first open this modal, the data is undefined.When I close it and open it a second time, the data appears.What do I need to do to see the data first?
There is no problem in pulling the data, when I log the data appears first.I think there is a problem with state. how do i solve this