CODEWITHSUNDEEP
javascriptreact-native
ZaheenSiddiqui
ZaheenSiddiqui

Reputation: 11

React-Native FlatList with Individual state for every component

Here is my code to display the FlatlList with order details on App. In the components of FlatList, radio button, icon and one button will be displayed. Whenever user will click on button, Radio button will be hidden (I'm handling this function with the help of state variables. The problem is whenever I click on button inside a component, Radio button and icon is show/hide in every component. I want it to be happened individually inside a component. So Radio Button and Icon will be Hidden/Shown inside the component I am working, not in other components. Kindly help this issue is wasting my lot of time. Thanks in advance!

<FlatList
  data={this.state.dataSource2}
  extraData={this.state}
  keyExtractor={(item, index) => index}
  renderItem={({ item, index }) => (
    <View style={styles.addressBox}>
      <Text style={styles.deliveryNumber}> {index} </Text>
      <Text style={styles.pickupLocation1}> Delivery Location </Text>
      <Text style={styles.address1}>
        {' '}
        {item.flat_name} {item.building_name}
        {item.city}{' '}
      </Text>
      <Text style={styles.pickupLocation1}>
        {' '}
        {item.f_name} {item.l_name}{' '}
      </Text>
      <Text style={styles.address1}> {item.mobile} </Text>
      {this.state.status == false ? (
        <View style={styles.viewIcon}>{myIcon}</View>
      ) : null}
      {this.state.setStatus1 == false ? (
        <View>
          <TouchableOpacity
            onPress={this.setOrderStatus}
            style={styles.statusButton}>
            <Text style={styles.statusButtonText}>Status</Text>
          </TouchableOpacity>
        </View>
      ) : null}
      {this.state.statusView1 == false ? (
        <View style={styles.viewStatus}>
          <RadioForm
            radio_props={deliveryStatus}
            formHorizontal={true}
            buttonSize={10}
            buttonColor={'#7B1113'}
            labelStyle={{ fontSize: 13 }}
            onPress={value => {
              deliveryStatus.value;
            }}
          />
          <TouchableOpacity
            onPress={this.setStatusFun2}
            style={styles.updateStatusButton}>
            <Text style={styles.buttonText}>Update Status</Text>
          </TouchableOpacity>
        </View>
      ) : null}
    </View>
  )}
/>

Upvotes: 0

Views: 2477

Answers (1)

Nemi Shah
Nemi Shah

Reputation: 876

In React Native if you want your component to have its own state management you should always create a separate component for it.

You should move everything inside the render method inside another class which is either a Component or a PureComponent depending on your requirements, and handle the state change inside that class instead of the class where you use FlatList.

Then simply do

<FlatList
  data={this.state.dataSource2}
  extraData={this.state}
  keyExtractor={(item, index) => index}
  renderItem={(item, index) => <CustomComponent item={item} index={index}/>
/>

This way every individual list item will be responsible for its own state only and wont affect the other items. Replace CustomComponent with whatever name you choose to name your list item.

Keep in mind that if you need to update the state of the parent component ( the one which has the FlatList ) on selection of a child you probably will have to pass a function that does that as a prop to your CustomComponent.

Upvotes: 1

Related Questions