Following is my React Generic Component. I have tried to simplify it but It is still not too short. Apologies for that. My intention is to create an editable menu with attributes and their values which would be passed on to this component from a parent component. staticData would be the fields/ skeleton of my View and the dynamicData (let us assume) comes from a query.I am passing the dynamicData into state variable newFormData and then displaying it in the SectionListrenderItem. I want to refresh the Input fields if the user clicks on cancel. For this, I am using a cancelUpdate function which resets the state newFormData to dynamicData which was never changed. This however does not refresh the SectionList. I still see the edited data.How can I reset the newFormData and re-render the Screen. I read about useReducer but also read that it is not a good practice.
editable-menu.component.tsx (Somewhat Simplified)
export const EditableMenuComponent = ({ staticData, dynamicData, fetchOrUpdateCourierProfile,}: { staticData: any; dynamicData: any; fetchOrUpdateCourierProfile: any;}) => { let storedData = {}; const handleFieldChange = (value: any, attribute: string) => { storedData[attribute] = value; setNewFormData(storedData); }; const [initialFormData, setInitialFormData] = useState<any>(); const [newFormData, setNewFormData] = useState<any>(); const [editable, setEditable] = React.useState<boolean>(false); const saveProfile = () => { setEditable(false); fetchOrUpdateCourierProfile(MutationAction.UPDATE); }; const cancelUpdate = () => { console.log('cancel'); setEditable(false); setNewFormData(dynamicData); }; React.useEffect(() => { setNewFormData(dynamicData); setInitialFormData(dynamicData); }); const renderItem = ({ item, }: { item: { id: string; title: string }; }) => (<Layout level="1" style={[themedStyles.layoutContainer]}><Text appearance="hint" category="s1"> {item.title}</Text><Input defaultValue={newFormData ? newFormData[item.id] : ''} // value={newFormData ? newFormData[item.id] : ''} onChangeText={(text) => handleFieldChange(text, item.id)} appearance="default" disabled={!editable} textStyle={{ color: 'black' }}></Input></Layout> ); const FlatListItemSeparator = () => { return ( //Item Separator<View style={themedStyles.listItemSeparatorStyle} /> ); }; return (<SafeAreaView style={themedStyles.container}><ScrollView> {editable ? (<Header backgroundColor="#fff" leftComponent={<Text style={{ color: 'red' }} onPress={() => { console.log('setEdit false 1'); cancelUpdate(); }}> Cancel</Text> } rightComponent={<Text style={{ color: 'blue' }} onPress={() => { console.log('setEdit false 2'); saveProfile(); }}> Save</Text> } /> ) : (<Header backgroundColor="#fff" rightComponent={<Text style={{ color: 'blue' }} onPress={() => { console.log('setEdit true'); setEditable(true); }}> Edit</Text> } /> )}<SectionList ItemSeparatorComponent={FlatListItemSeparator} sections={staticData} renderItem={renderItem} extraData={editable} renderSectionHeader={({ section: { title } }) => (<Text style={themedStyles.sectionHeaderStyle}> {title}</Text> )} keyExtractor={(item) => item.id} /></ScrollView></SafeAreaView> );};