My React Native FlatList still won't refresh

I'm trying to create a FlatList that updates when its props update. It is a functional component that is called within a class component (but not defined in the class component). I've tried using the extraData prop but I'm still having no luck. Can anyone please help me understand why this isn't working? Here's the code (note that RenderSection and RenderNameAndPrice are defined in different files and working fine):

//functional component where said list is defined  function RenderOrderLive(props){      return(          <View style={views.renderOrderLive}>          <View style={views.subContainer}>              <Text style={text.headerOne}>Order: {props.orderName} ({props.orderType})</Text>          </View>          <View style={views.invisibleContainer}>              <FlatList                  data={props.items}                  extraData={props.items,props.subTotal}                  ListFooterComponent={                      <View style={views.subContainer}>                          <RenderNameAndPrice style= name='Subtotal' price={props.subTotal} />                      </View>                  }                  keyExtractor={(item,index)=>item.name.concat(index)}                  renderItem={({item})=>{                      if(item.name==''){return null}                      else{                          return(                              <RenderNameAndPrice name={item.name} price={item.price} />                          )                      }                  }}              />              <View style={views.nextButton}>                  <PrimaryButton text='next' />              </View>          </View>      </View>      )  }  

//class component where said list is called     class SelectItems extends React.Component{      constructor(props){          super(props);          this.state={              items:[{name:'',price:0}],              subTotal:0,          }      }      render(){          //the purpose of defining the RenderMenu component within SelectItems is to allow the to both edit the stateful object that is the order          //this component has menu passed to it for reusability purposes.          function RenderMenu(props){              return(                  <SafeAreaView style={views.invisibleContainer}>                          <FlatList                              contentContainerStyle=                              listKey='whole menu'                              data={props.data}                              keyExtractor={item=>item.categoryName}                              showsVerticalScrollIndicator={false}                              renderItem={({item})=>{                                  return (                                      <RenderSection                                          sectionName={item.categoryName}                                           data={item.categoryItems}                                           numColumns={4}                                          key={item.categoryName}                                          pressHandler={(item)=>props.pressHandler(item)}                                      />                                  );                              }}                          />                  </SafeAreaView>              )          }          return(              <SafeAreaView style={views.secondaryContainer}>                  <View style={views.rowContainer}>                      <View style=>                          <RenderMenu                           pressHandler={(item)=>{                              this.setState((prevState)=>{                                  prevState.items.push(item);                                  prevState.subTotal+=item.price                              });                          }}                          data={menu} />                      </View>                      <View style=>                          <RenderOrderLive                               orderName={this.props.orderName}                              orderType={this.props.orderType}                              items={this.state.items}                              subTotal={this.state.subTotal}                          />                                              </View>                  </View>              </SafeAreaView>          )      }  }  

Thanks heaps in advance

https://stackoverflow.com/questions/66996394/my-react-native-flatlist-still-wont-refresh April 08, 2021 at 10:05AM