Is there a way to get the Title of the selected item from another component in React Native-CodePudding

I have two different components "HomePage" & "ListItemCA"

In HomePage, I have a FlatList and a modal popup

<FlatList
data={ listData}
keyExtractor={list => list.Title}
renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal} />} 
/>

and each list item is called from another component ListItemCA

function ListItemCA({data, onLongPress}) {

    return (
        <TouchableOpacity onLongPress={onLongPress} >
        <View style={styles.container}>
            <Text style={styles.title}>{data.Title}</Text>
            <View style={styles.metaContainer}>
                <Text style={styles.meta}>{( data.totalMonths != null ? data.totalMonths : '0' )} Months</Text>
                <Text style={styles.meta}>{( data.members != null ? data.members.length : '0' )} Members</Text>
            </View>
        </View>
        </TouchableOpacity>
    );
}

What I want to acheive?

I want to get the selected list item title on my HomePage component. When a user longpress on a list item that title should be displayed on a modal popup. How do I pass the selected list item title to the HomePage component using longpress?

CodePudding user response：

If your goal is to display data from the long pressed item in the modal, you could add the data as a parameter of your openModal function:

function openModal(data) {
    // your function
    return (
        <Text>{data.Title}</Text>
    )
}

Then, in your FlatList, modify the props of ListItemCA to call openModal for the selected item:

renderItem={({ item }) => <ListItemCA data={item} onLongPress={openModal(item)} />}

If you also want to save the data from the long pressed item in your HomePage component for other uses, you could save it in the state. In your HomePage component:

import React, { useState } from 'react'

function HomePage() {
    const [itemData, setItemData] = useState()

    // your code
}

Then, in your flatlist:

<FlatList
        data={listData}
        keyExtractor={list => list.Title}
        renderItem={({ item }) => 
            <ListItemCA 
                data={item} 
                onLongPress={ () => {
                    setItemData(item)
                    openModal(item)
                }} 
            /> 
        }
    />

CodePudding user response：

You can achieve this by passing(return) parameter from your component like this -

function ListItemCA({data, onLongPress}) {
    return (
      <TouchableOpacity onLongPress={() => {
        onLongPress(data.Title);
        //return data.Title when onLongPressed clicked
      }}>
        <View style={styles.container}>
          ...
        </View>
      </TouchableOpacity>
    );
}

then get it in props -

<FlatList
   data={listData}
   keyExtractor={list => list.Title}
   renderItem={({ item }) =>
      <ListItemCA
        data={item}
        onLongPress={(title) => {//this **title** return from **onLongPress(data.Title)**
          openModal();
          setTitle(title);// or directly can pass that title in openModal func.
        }}
      />
   } 
/>