CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-flatlist
Emily
Emily

Reputation: 151

How to select an item from list and store it on the state React Native

Im having hard time to resolve this logic, I hope somebody can help. When the address 2 is pressed I want to get that value and replace the Address 1 with it. How can I select the item and store it on the state or replace the Address 1 with it??? Below is my code:

 const [collapse, setCollapse] = useState(false);

 <Collapse
          style={styles.locationContainer}
          isCollapsed={collapse}
          onToggle={(isCollapsed) => setCollapse(isCollapsed)}
        >
          <CollapseHeader>
            <View onPress={() => setCollapse(!collapse)}>
              <Text style={styles.title}>Choose location</Text>
              <View style={styles.friendsContainer}>
                <View style={styles.itemsContainerLocation}>
                  <Text style={styles.subTitle}>Address 1</Text>
                  <Text style={styles.default}>(default)</Text>
                </View>
                {collapse ? (
                  <Ionicons name="ios-arrow-up" size={24} color="black" />
                ) : (
                  <Ionicons name="ios-arrow-down" size={20} color="black" />
                )}
              </View>
            </View>
          </CollapseHeader>
          <CollapseBody>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 2</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 3</Text>
              </TouchableOpacity>
            </View>
            <View style={styles.adressesContainer}>
              <TouchableOpacity>
                <Text style={styles.adressesName}>Address 4</Text>
              </TouchableOpacity>
            </View>
          </CollapseBody>
        </Collapse>

Upvotes: 1

Views: 3063

Answers (1)

98sean98
98sean98

Reputation: 352

See react tutorial on state and lifecycle.

Something similar to

const addresses = ['Address1', 'Address2', ...];

const [selectedAddressIndex, setSelectedAddressIndex] = useState(0);

// render selected address
<>
  <Text>{addresses[selectedAddressIndex]}</Text>
</>

// render each selectable address inside a TouchableOpacity
<>
  {
    addresses.map((address, index) => (
      <TouchableOpacity key={index} onPress={() => setSelectedAddressIndex(index)}>
        <Text>{address}</Text>
      <TouchableOpacity/>
    ))
  }
</>

should work for you.

map is a powerful array method in js that allows you to build identical components for elements in an array.

onPress in TouchableOpacity is the prop that accepts a callback function, whereby the callback function () => setSelectedAddressIndex(index) is called when an onPress event is fired.

Additionally, there is a new Pressable component that react-native recommends, replacing TouchableOpacity.

Upvotes: 3

Related Questions