How to add navigation to different items in a rendered array-CodePudding

I am attempting to press on this pressable button, and navigate to a new page. The tricky bit is that this Pressable item is part of a returned array, as there are multiple of them being rendered each with different data. I want each button to take me to a 'product page', each page being different depending on the button

Here is what i have so far:

The main function

const JobRequestList = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    returnArray().then(data2 => {
      setData(data2);
    });
  }, []);
  if (data.length === 0) {
    j = [];
    return (
      <ScrollView>
        <View key={'ERROR'} style={styles.wrapperERROR}>
          <Text style={styles.textError}> {'No Current Job Requests'} </Text>
        </View>
      </ScrollView>
    );
  } else {
    return <ScrollView>{data}</ScrollView>;
  }
};

This requests the data, and returns it in a form that can be rendered. It either returns a no object, or an array of items from the below function - This is where my onPress is located, and have no idea how to implement a navigation fnction into it. Please note, i already have my navigation functions setup

const returnArray = async () => {
  return queryData().then(() => {
    return j.map(x => {
      return (
        <Pressable
          key={x.id}
          style={styles['wrapper'   x.data().PD]}
          onPress={() => {}}>
          <Text style={styles.text}> {x.data().PD} </Text>
          <Text style={styles.text}> {x.data().address} </Text>
          <Text style={styles.text}> {x.data().time} </Text>
        </Pressable>
      );
    });
  });
};

The above function then calls the below

const queryData = async () => {
  await firestore()
    .collection('Jobs')
    .where('driver', '==', 'TBA') //TODO ADD CUSTOMER DISTANCE
    .get()
    .then(querySnapshot => {
      querySnapshot.forEach(doc => {
        j.push(doc);
      });
    });
};

Here is what my navigation functions should be inside this class - Again, which is already setup correctly

const navigation = useNavigation();

navigation.navigate('JobInfo');

Thankyou in advanced!

CodePudding user response：

It is anti-pattern in React to store JSX in component state. React components's rendered UI is a function of state & props. Store the data in state and then render the data mapped to JSX.

Example:

queryData fetches firebase docs & data

const queryData = async () => {
  await firestore()
    .collection('Jobs')
    .where('driver', '==', 'TBA') //TODO ADD CUSTOMER DISTANCE
    .get()
    .then(querySnapshot => {
      const docs = [];
      querySnapshot.forEach(doc => {
        docs.push({
          ...doc,
          data: doc.data(),
        });
      });
      return docs;
    });
};

Apply the navigation logic in the Pressable component's onPress handler when mapping the data state.

const JobRequestList = () => {
  const navigation = useNavigation();

  const [data, setData] = useState([]);

  useEffect(() => {
    queryData()
      .then(data => {
        setData(data);
      });
  }, []);

  return (
    <ScrollView>
      {data.length
        ? data.map(el => (
            <Pressable
              key={el.id}
              style={styles['wrapper'   el.data.PD]}
              onPress={() => {
                navigation.navigate('JobInfo');
              }}
            >
              <Text style={styles.text}> {el.data.PD} </Text>
              <Text style={styles.text}> {el.data.address} </Text>
              <Text style={styles.text}> {el.data.time} </Text>
            </Pressable>
          ))
        : (
          <View key={'ERROR'} style={styles.wrapperERROR}>
            <Text style={styles.textError}> {'No Current Job Requests'} </Text>
          </View>
        )
      }
    </ScrollView>
  );
};