How to reload Flatlist react native?

Question

I have a rendered list and I would like it when a change in status is generated the entire FlatList is recharged

what I have is a search engine and I want that when it brings the new data the FlatList will refresh itself with the new information

I need that every time you enter a letter in the search engine the FlatList will recharge

  async buscar(buscar) {
            this.setState({refreshing: true});
            const coins = await ajax.searchProd(buscar);
            this.setState({coins});
            console.log(coins);
            this.setState({refreshing: false});
        }

    render() {
            return (
<View style={styles.container}>
                <Image style={styles.logoHeader} source={require('../../public/images/productos.png')}/>
                <View style={styles.containerSearch}>
                    <TextInput
                        style={styles.inputBuscar}
                        placeholder={'Buscar Productos'}
                        underlineColorAndroid={"transparent"}
                        onChangeText={(buscar) => {
                            this.setState({buscar: buscar});
                            this.buscar(this.state.buscar);
                            console.log(this.state.buscar);
                        }}
                    />
                    <Image style={styles.imageSearch} source={require('../../public/images/search.png')}/>
                </View>
               <View style={styles.containerPro}>

                        <FlatList
                            extraData={this.state.coins}
                            data={this.state.coins}
                            keyExtractor={(item) => item.id.toString()}
                            refreshControl={
                                <RefreshControl
                                    refreshing={this.state.refreshing}
                                    onRefresh={this._onRefresh}
                                />
                            }
                            renderItem={({item}) => {

                                let url = 'http://laeconomiadelsur.com/upload/' + item.foto;
                                const tableData = [
                                    [<View>
                                        <Image source={{uri: url}} style={{
                                            width: 50,
                                            height: 70,
                                        }}/>
                                    </View>,
                                    ],
                                    [<View style={styles.cellIcons}>
                                        <Text
                                            style={styles.textCells}>{item.nombre}</Text>
                                        <Text
                                            style={styles.textCellsDescription}>{item.descripcion}</Text>
                                        <Text
                                            style={styles.textCellsPrecio}>{numeral(item.precio).format('$0,0')}</Text>
                                    </View>,

                                    ],
                                    [<View>
                                        <Text style={styles.cantidad1}>seleccionar: </Text>
                                        <View>
                                            <NumericInput
                                                onChange={(value) => {
                                                    let total = value * item.precio;
                                                    console.log(value);
                                                    console.log(total)
                                                }}
                                                totalWidth={calcSize(250)}
                                                totalHeight={calcSize(70)}
                                                minValue={0}
                                                iconSize={15}
                                                step={1}
                                                sepratorWidth={0}
                                                borderColor={'transparent'}
                                                inputStyle={{
                                                    backgroundColor: 'rgb(252,226,227)',
                                                    borderTopColor: 'rgb(226,0,30)',
                                                    borderBottomColor: 'rgb(226,0,30)',
                                                    borderWidth: 1,
                                                    fontFamily: "NeutraText-BookSC",
                                                    fontSize: 17

                                                }}
                                                containerStyle={{
                                                    borderWidth: 1,
                                                    borderColor: 'rgb(226,0,30)',
                                                    backgroundColor: 'transparent',

                                                }}
                                                rounded
                                                textColor='#000000'
                                                rightButtonBackgroundColor={'rgb(235,209,210)'}
                                                leftButtonBackgroundColor={'rgb(235,209,210)'}
                                            />
                                        </View>
                                        <Text style={styles.cantidad}>cantidad</Text>
                                    </View>,]
                                ];

                                return (
                                    <View style={{flex: 1}} key={item.id}>
                                        <Table style={styles.table} borderStyle={{borderWidth: 2, borderColor: 'white'}}
                                               key={item.id}>
                                            <Cols data={tableData} flexArr={[1, 2, 2]} style={styles.cells}
                                                  key={item.id}/>
                                        </Table>
                                    </View>
                                );
                            }}
                        />

                </View>


            </View>
        );

Answer 1

<TextInput
   style={styles.inputBuscar}
   placeholder={'Buscar Productos'}
   underlineColorAndroid={"transparent"}
   onChangeText={(buscar) => {
    /*   Updated buscar value won't be available in next line instantly
     *   just after the setState. So, better set buscar State in 
     *   this.buscar() Function.
     */
        /* this.setState({buscar: buscar}); Move to  buscar Function*/

        this.buscar(buscar).then(()=>{
           console.log(this.state.buscar);
        }).catch((e)=> console.log("Error: ",e))
    }}
/>

An Async function always returns a promise object. So, while calling buscar function you should handle the promise.

async buscar(buscar) {
  this.setState({
   refreshing: true, 
   buscar: buscar,
  });
  const coins = await ajax.searchProd(buscar);
  console.log(coins);
  this.setState({
    coins: conins,
    refreshing: false
  });
}

In Flatlist ExtraData property should contain the this.state

extraData={this.state}