i have one issue this issue consists in render values on my list if exists in my db but i don't know how i can create this, because i don't know how i can take this values and set into my list.
basically i have this list
when i have one value on my db this list need render like this
what I need is that if I have a specialty registered for a doctor it must render selected in the list according to its position in the list and bringing the data in the inputs according to the example image I put.
Bellow is my code:
interface Speciality { id: string; name: string; description: string; status?: boolean;}interface SpecialtiesListProps { specialtyId: number; rqe?: string; uf?: string;}const SpecialtiesList: React.FC = () => { const navigation = useNavigation(); const t = loadTranslation(translation); const theme = useContext(ThemeContext); const {currentUser} = useContext(AuthContext); const [specialtiesList, setSpecialtiesList] = useState<Speciality[]>([]); const [id, setId] = useState<SpecialtiesListProps[]>([]); const [originalSpecialties, setOriginalSpecialties] = useState<Speciality[]>( [], ); const [associateSpecialtyToDoctorMutation, {loading: sendingSpecialities}] = useAssociateSpecialtyToDoctorMutation(); const modalDeleteSpecialtyRef = useRef<Modalize>(null); const { data: specialtiesData, error, loading, } = useSpecialtiesQuery({ fetchPolicy: 'no-cache', }); const [getDoctorSpecialties, {data: docSpecialties}] = useGetDoctorSpecialtiesLazyQuery({ variables: { doctorId: Number(currentUser?.doctorId), }, }); const dataSpecialties = docSpecialties?.doctorSpecialties && docSpecialties?.doctorSpecialties; useEffect(() => { getDoctorSpecialties(); }, []); useEffect(() => { if (!error) { let specialtyList = (specialtiesData?.specialties as Speciality[]) || []; setSpecialtiesList(specialtyList); setOriginalSpecialties(specialtyList); } }, [specialtiesData, error]); const toggleItemList = (item: Speciality) => { const newSpecialties = specialtiesList.map((specialty) => specialty.id === item.id ? {...specialty, status: !specialty.status} : specialty, ); setSpecialtiesList(newSpecialties); const newOriginalSpecialties = originalSpecialties.map((specialty) => specialty.id === item.id ? {...specialty, status: !specialty.status} : specialty, ); setOriginalSpecialties(newOriginalSpecialties); }; const filter = (search?: string) => { if (search) { setSpecialtiesList( originalSpecialties.filter((specialty) => specialty.name.match(new RegExp(search, 'ig')), ), ); } else { setSpecialtiesList(originalSpecialties); } }; const ids = specialtiesList .filter((item: Speciality) => item.status) .map((item) => Number(item.id)); async function sendSpecialities() { try { if (ids.length > 0) { const {data, errors} = await associateSpecialtyToDoctorMutation({ variables: { doctorId: Number(currentUser?.doctorId), specialties: id.map((item) => ({ specialtyId: item.specialtyId, rqe: item.rqe +'/'+ item.uf, })), }, }); if (errors || !data?.associateSpecialtyToDoctor) { console.log('error', errors); throw errors; } Toast.show({ type: 'success', text1: t.successAddSpecialities, visibilityTime: 2500, }); navigation.goBack(); } } catch (err) { Toast.show({ type: 'error', text1: t.failAddSpecialities, visibilityTime: 2500, }); } } const handleChange = (value: string, SpecialtyId: number) => { const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId); if (!newIdFilter) { setId([...id, {specialtyId: SpecialtyId, rqe: value}]); } else { setId( id.map((item) => { if (item.specialtyId === SpecialtyId) { return { specialtyId: Number(item.specialtyId), rqe: value, uf: item.uf, }; } else { return item; } }), ); } }; const handleChangeUf = (value: string, SpecialtyId: number) => { const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId); if (!newIdFilter) { setId([...id, {specialtyId: SpecialtyId, uf: value}]); } else { setId( id.map((item) => { if (item.specialtyId === SpecialtyId) { return { specialtyId: Number(item.specialtyId), uf: value, rqe: item.rqe, }; } else { return item; } }), ); } }; const handleDeleteSpecialty = () => { modalDeleteSpecialtyRef.current?.close(); }; const renderItemList = (item: Speciality) => { return (<><SpecialityItem onPress={() => toggleItemList(item)} activeOpacity={1}><SpecialityItem.Wrapper><CheckBox onPress={() => toggleItemList(item)} checked={!!item.status} checkedIcon={<CheckFilledIcon width={22} fill={theme.primary} />} uncheckedIcon={<UncheckIcon height={20} stroke={theme.grey} />} /><SpecialityItem.Container><SpecialityItem.Text>{item.name}</SpecialityItem.Text> {item.status && (<SpecialityItem.Container.Inputs> {ids[0] !== 56 && (<><SpecialityItem.Container.Rqe><SpecialityItem.Label>{t.rqe}</SpecialityItem.Label><RqeField keyboardType="numeric" placeholder={t.rqe} onChangeText={(value) => handleChange(value, Number(item.id)) } /></SpecialityItem.Container.Rqe><SpecialityItem.Container.Uf><SpecialityItem.Label>{t.uf}</SpecialityItem.Label><SpecialityItem.Container.Uf.Row><RqeField placeholder={t.uf} onChangeText={(value) => handleChangeUf(value, Number(item.id)) } /><SpecialityItem.DeleteButton onPress={() => modalDeleteSpecialtyRef.current?.open() }><TrashIcon fill={theme.white} width={15} height={15} /><SpecialityItem.Container.Uf.Row.Text> deletar</SpecialityItem.Container.Uf.Row.Text></SpecialityItem.DeleteButton></SpecialityItem.Container.Uf.Row></SpecialityItem.Container.Uf></> )}</SpecialityItem.Container.Inputs> )}</SpecialityItem.Container></SpecialityItem.Wrapper></SpecialityItem></> ); }; const listHeader = (<ListContainer><MedicalReportSearch onSearch={filter} /></ListContainer> ); const renderEmptyList = <NoItems>{t.noItems}</NoItems>; return (<><DeleteSpecialtyModal modalizeRef={modalDeleteSpecialtyRef} onPress={handleDeleteSpecialty} /><SpecialityList data={specialtiesList} stickyHeaderIndices={[0]} keyboardShouldPersistTaps="handled" keyExtractor={(item: Speciality) => item.id.toString()} renderItem={({item}: {item: Speciality}) => renderItemList(item)} ListHeaderComponent={listHeader} ListEmptyComponent={renderEmptyList} /><ContentContainer> {loading || sendingSpecialities ? (<ActivityIndicatorStyled /> ) : (<Button title={t.buttonLabel} onPress={sendSpecialities} color={theme.primary} hasArrows /> )}</ContentContainer></> );};export default SpecialtiesList;