How to re-render a flatlist

Question

I'm making a mobile app that shows a list of movies, but when I search for a movie FlatList won't update, how can I fix it?

I tried too many things but it still does not work, my objective is to update the list when the button is pressed, the API gives me the data correctly but the list does not update.

This is my code:

export const Home = () => {

    let { peliculasList, loadPeliculas } = peliculasPaginated();
    const [name, setName] = useState('');
    const [year, setYear] = useState('');
    const [buscado, setBuscado] = useState(false);
        
    const handleClick = async () => {
        const resp = await peliculasApi.get<SimplePelicula[]>(`http://www.omdbapi.com/?t=${name}&y=${year}&plot=full&apikey=d713e8aa`);
        setBuscado(!buscado);
        peliculasList = resp.data
    }

    return (
        <>
            <View
                style={{
                    alignItems: 'center',
                    height: 760
                }}
            >

                <Text style={{
                    ...style.title,
                    ...style.globalMargin,
                    top: 0,
                    marginBottom: 0
                }}>Movies</Text>

                <TextInput
                    placeholder='Movie Name'
                    style={styles.input}
                    onChangeText={(val) => setName(val)}
                />

                <TextInput
                    placeholder='Year'
                    style={styles.inputMovie}
                    onChangeText={(val) => setYear(val)}
                />

                <TouchableOpacity onPress={() => handleClick()}>
                    <ButtonSr></ButtonSr>
                </TouchableOpacity>

                <FlatList
                    data={ peliculasList }
                    keyExtractor={ (pelicula) => pelicula.imdbID }
                    showsVerticalScrollIndicator={ false }
                    extraData={ buscado }

                    renderItem={({ item }) => ( <PeliculasCard pelicula={item} ></PeliculasCard> )}
                />
            </View>
        </>
    )
}

Answer 1

Try this out just change the 'MOVIENAME' to a response from the api such as the movie name and refrence it as the item.API object of your choice

import React, { useState } from 'react'
import { View, Text, TextInput, FlatList, Button } from 'react-native'

export default function App() {


  const [FetchedData, setFetchedData] = useState([])

  const [SearchTerm, setSearchTerm] = useState('')
  const [Data, setData] = useState(FetchedData)
  const [ArrayHolder, setArrayHolder] = useState(FetchedData)
  
  const FetchMovies = () => {

    fetch('url')
      .then(res => res.json())
      .then(res => setFetchedData(res))

  }

  FetchMovies()

  function dataSearch(text) {
    const newData = ArrayHolder.filter(item => {
      const itemData = item.MOVIENAME.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData) > -1
    })

    setData(newData)
  }
  return (
    <View>
      <Button title='Press' onPress={() => dataSearch(SearchTerm)} />
      <TextInput
        onChangeText={(text) => setSearchTerm(text)}
        placeholder="Search Here"
      />
      <FlatList
        data={Data}
        renderItem={({ item }) => <Text>{item.MOVIENAME}</Text>}
      />
    </View>
  )
}

Answer 2

Try to save your resp.data within the state and declare that state in your Flatlist's data prop may solve the issue.