How to make FlatList re-rendering with updated data

Question

I am building a kind of list component. in that component I am allowing user to make some changes in the flat list. I am trying to add the option of that if user pull to refresh to return back the main data was rendered before his modification Need Help to get that solved

     const [text, setText] = useState({});
        const [switchValue, setSwitchValue ] = useState(false);
        const [refresh, setRefresh] = useState(false);


    const _handleOnPress = ({index}) => {
            const contentCopy = text.content;
            const current = contentCopy[index];
            const updatedContent = [...contentCopy.slice(0, index),
            {...current, repeat: current.repeat - 1}, ...contentCopy.slice(index + 1)];

            setText({...text, content:updatedContent});

        };

    const onRefresh = () => {}

      return (
             <View>

            <FlatList 
            data = {text.content}
            keyExtractor = {(text) => text.id}
            style = {styles.flatList}
            refreshing = {refresh}
            onRefresh = {onRefresh}
            extraData = {text.content}
            renderItem = {({item, index}) => {
                {if( item.repeat === 0 ) {
                    return null
                }
                return (
                    <View style = {styles.listContainer}>
                        <TouchableOpacity onPress = {() => _handleOnPress({item, index})}>
                        <Amiri text = {item.text} />
                        <Spacer />
                        <PlaySound  link = {item.audio_url} />
                        </TouchableOpacity>
                        <View style = {styles.repeatContianer} >
                        <Spacer>
                            <Text style = {styles.repeatText}> {item.repeat} </Text>
                        </Spacer>
                        </View>
                    </View>
                );
            }

            }}
            />
        </View>
    );
};

Answer 1

if you want to reset the data then you will need to have 2 sets of data source.

1. original
2. updated

Use the "updated" data as your main data source So when you use onRefresh you just need to set the "updated" data with data in "original"

const [originalText] = React.useState({});
const [text, setText[ = React.useState({});

onRefresh = () => {
   setText(originalText)
}

something along that way

ps: please edit your question because it's not related with the flat list, more about your state management

Answer 2

That what I found and worked well...

first: add a state and let's call it refrshing and set it to false

const [refreshing, setRefreshing ] = useState(false);

second: in flat list add two props

refreshing = {refreshing} // same state //
onRefresh = {onRefresh} // function to be called back //

third: the function

const onRefresh = () => {
setRefresh(true);
Api () // get request again of data // 
}

fourth: in Api function itself

const Api = async() => {
        const response = await myApi.get(`/${id}`);
        setText(response.data);

        setRefreshing(false);

    };