React native using a map function on an array to select items

I am having a little bit of an issue trying to solve this problem. Ok so I have a react native app that I am fetching data from my back end. I am using a Flatlist with a ListItem inside of it. I have my data displaying like this...

Bacon Burger  13.50  Fried Fish  10.50  Pizza  9.60  Turkey Burger  12.00  

thru my flatlist/listitem. I have it set up where you have the item and underneath the item I have the item's price. I have set up a function that pairs the item and its price together. Here is that piece of code....

function pair(item, index) {          const rows = category.reduce(function (rows, key, index) {              return (index % 2 == 0 ? rows.push([key])               : rows[rows.length-1].push(key)) && rows;          }, []);  }  

What I am trying to do is when I click on an item, I want to be able to select the item (that I picked) and also its price (that goes with it) together. Once that item is picked I want to be able to take both the item and its price and set them to two different variables using useState. I know how to set them to their variables. I am just having a problem selecting and console.log my selection.

The steps that I took was to map over the array and the item that I selected, I would alert it to see if it works. Here is that code...

function pair(item, index) {          const rows = category.reduce(function (rows, key, index) {              return (index % 2 == 0 ? rows.push([key])               : rows[rows.length-1].push(key)) && rows;          }, []);          const food = rows.map((i) => {              const price = i;              return price;          });          alert(food);         }  

When I do run this code, all it does it give me all of the items together in one long array. It does not alert the selected item that I pressed. I also tried to use const price = i.split(','); and it did not work. I know I am missing something. I just don't get how I can't just click on the item and just display that item and its price, instead of clicking on one item and everything in the array is alerted.

Here is my full where the items are rendered....

const pressItem = (item, index) => {          pair(item);         };        function pair(item, index) {          const rows = category.reduce(function (rows, key, index) {              return (index % 2 == 0 ? rows.push([key])               : rows[rows.length-1].push(key)) && rows;          }, []);          const food = rows.map((i) => {              const price = i;              return price;          });          alert(food);      }              return (          <View style={styles.container}>                <Icon                   name='arrow-left'                  color="#000000"                  size={25}                  style={styles.menuIcon}                  onPress={back}              />                            <FlatList                   data={category}                  //extraData={rows}                  keyExtractor={(item, index) => index.toString()}                  rows                  renderItem={({ item, index }) => (                      <ListItem                      titleStyle=                      title={item}                      onPress={() => pressItem(item)}                      style={[item.selected ? styles.selected : styles.normal]}                      bottomDivider                      chevron                      />                  )}              />

https://stackoverflow.com/questions/66145777/react-native-using-a-map-function-on-an-array-to-select-items February 11, 2021 at 06:04AM