Breaking News: Grepper is joining You.com. Read the official announcement!

react native dynamically update flatlist data

Defeated Dingo answered on May 23, 2022 Popularity 6/10 Helpfulness 3/10

answer react native dynamically update flatlist data

react native dynamically update flatlist data

Comment

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

export default function HomeScreen() {

  var initialElements = [
    { id : "0", text : "Object 1"},
    { id : "1", text : "Object 2"},
  ]

  const [exampleState, setExampleState] = useState(initialElements)

  const addElement = () => {
    var newArray = [...initialElements , {id : "2", text: "Object 3"}];
    setExampleState(newArray);
  }

  return (
    <View style={styles.container}>
        <FlatList
            keyExtractor = {item => item.id}  
            data={exampleState}
            renderItem = {item => (<Text>{item.item.text}</Text>)} />
        <Button
          title="Add element"
          onPress={addElement} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    width: '100%',
    borderWidth: 1
  },
});
 Run code snippet

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: flatlist javascript react-native

Link to this answer
Share Copy Link

Contributed on May 23 2022

Defeated Dingo

0 Answers Avg Quality 2/10

react native dynamically update flatlist data

Contents

More Related Answers

react native dynamically update flatlist data

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.