Props values changes when clicked onpress within a Flatlist item-CodePudding

Props values gets changed onpress() event of FlatList Item. I am passing an array but the array gets auto nested again into an array causing issues on Second time onpress event of the same item.

Below is the first time onpress data:

Object {
  "content": "Data",
  "date": "2022-06-04",
  "image": "url",
  "link": "url",
  "pubdate": "2022-06-04T20:00:33.639242 05:30",
  "source": "abc",
  "time": "20:00:33",
  "title": "abc",
}

Below is the Second time onpress Data:

Object {
"item":Object {
  "content": "Data",
  "date": "2022-06-04",
  "image": "url",
  "link": "url",
  "pubdate": "2022-06-04T20:00:33.639242 05:30",
  "source": "abc",
  "time": "20:00:33",
  "title": "abc",
},
}

Below is the FlatList View which has the onpress event:

import React, { useState } from "react";
import { StyleSheet, View, Dimensions, Text, Modal, Share } from "react-native";
import { Icon, Tile } from "react-native-elements";
import {
  Avatar,
  Button,
  Card,
  Title,
  Paragraph,
  Subheading,
  Caption,
} from "react-native-paper";
import moment from "moment";
import { WebView } from "react-native-webview";
import { ActivityIndicator } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

// import { Container } from './styles';

const { width } = Dimensions.get("window");
const { webViewHeight } = Dimensions.get("window").height - 56;

const BlockCard = ({ navigation, item }) => {
  const { image, title, source, date, time, link } = item;
  const momentsago = moment(date   " "   time, "YYYY/MM/DD HH:mm:ss").fromNow();
  const source2 = source   " | "   momentsago;
  return (
    <View style={styles.centeredView}>
      <Card>
        <Card.Cover source={{ uri: image }} />
        <Card.Content>
          {/* <Subheading style={{fontWeight:"bold"}}>{title}</Subheading> */}
          <Title>{title}</Title>
          <Caption style={{ fontWeight: "bold" }}>{source2}</Caption>
        </Card.Content>
        <Card.Actions style={{ alignSelf: "flex-end" }}>
          <Button icon="share-variant" color="#E1B72E">
            Share
          </Button>
          <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details", (item = { item }))}
          >
            Explore
          </Button>
        </Card.Actions>
      </Card>
    </View>
  );
};

Below is the Details Screen:

const Details = ({ navigation, route }) => {
  var { image, title, source, date, time, link, pubdate, content } =
    route.params.item;
  var momentsago = moment(date   " "   time, "YYYY/MM/DD HH:mm:ss").fromNow();
  var source2 = source   " | "   momentsago;

  useEffect(() => {
    console.log(route.params.item);
  });

The Console.log captured the variance in the Data. Kindly provide me any pointers as I am very new to React Native.

CodePudding user response：

I think the nesting occurs here:

 <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details", (item = { item }))}
          >
            Explore
          </Button>

Try doing this instead

 <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details",item)}
          >
            Explore
          </Button>