How to pass data which is not relevant to render through Flatlist?

Question

I create Flatlist as below.

export default function Comments({ route }) {
  const renderComment = ({ item: comments }) => {
    return <CommentRow {...comments} />;
  };
  return (
    <Container>
      <CommentBox>
        <FlatList
          keyboardDismissMode={true}
          showsVerticalScrollIndicator={false}
          data={route.params.comments}
          keyExtractor={(comment) => "" + comment.id}
          renderItem={renderComment}
        />
      </CommentBox>
    </Container>
  );
}

rendered data set seems like below:

Object {
  "key": "Comments-uxnCZKk0KvTmpppxkM8IF",
  "name": "Comments",
  "params": Object {
    "comments": Array [
      Object {
        "__typename": "Comment",
        "createdAt": "1642680008811",
        "id": 1,
        "isMine": false,
        "payload": "등산 너무 좋았겠네~~",
        "user": Object {
          "__typename": "User",
          "avatar": "https://chungchunonuploads.s3.ap-northeast-2.amazonaws.com/avatars/4-1642681358399-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A9.png",
          "username": "김정호",
        },
      },
      Object {
        "__typename": "Comment",
        "createdAt": "1642680037676",
        "id": 3,
        "isMine": false,
        "payload": "다음주에 그 산으로 가자 우리도~~",
        "user": Object {
          "__typename": "User",
          "avatar": "https://chungchunonuploads.s3.ap-northeast-2.amazonaws.com/avatars/4-1642681358399-%E1%84%80%E1%85%B5%E1%86%B7%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A9.png",
          "username": "김정호",
        },
      },
    ],
    "photoId": 1,
  },
  "path": undefined,
}

So It successfully works. I return it to <CommentRow> Screen with this data set.

But I need to pass another data which is photoId. this photoId exists in this screen but not in CommentRow Screen.

And comments data set doesn't have this photoId information. So I need separately send it to CommentRow Screen with {...comments} data. But How can I send it through Flatlist?

I tried to make another object as combining comments object with photoId. But It failed :(

or Should I just bring photoId information in CommentRow screen as not passing through Flatlist?

If you need more explanation about my code, I can answer on real time.

please help me.

CommentRow Screen. PhotoId is used in cache.modify part since it is needed to update my cache.

export default function CommentRow({
  id,
  user,
  payload,
  isMine,
  createdAt,
  updatedAt,
  commentNumber,
}) {
  const navigation = useNavigation();
  const createdDate = new Date(+createdAt);
  const date = createdDate.toISOString().substring(0, 10);
  const updateDeleteComment = (cache, result) => {
    const {
      data: {
        deleteComment: { ok, error },
      },
    } = result;
    if (ok) {
      cache.evict({ id: `Comment:${id}` });
      cache.modify({
        id: `Photo:${photoId}`,
        fields: {
          comments(prev) {
            return [...prev, newCacheComment];
          },
          comments(prev) {
            return prev +1;
          }
        }
      })
    }
  };

  const [deleteCommentMutation] = useMutation(DELETE_COMMENT_MUTATION, {
    variables: {
      id,
    },
    update: updateDeleteComment,
  });
  const onDeleteClick = () => {
    deleteCommentMutation();
  };
  return (
    <Container>
      <CommentContainer>
        <UserImage source={{ uri: user.avatar }} />
        <TextBox>
          <Header>
            <Username>{user.username}</Username>
            <CreatedTime>{date}</CreatedTime>
          </Header>
          <CommentText>{payload}</CommentText>
        </TextBox>
      </CommentContainer>
      {isMine ? (
        <WriteContainer>
          <TouchableOpacity>
            <WriteComment>수정</WriteComment>
          </TouchableOpacity>
          <TouchableOpacity onPress={onDeleteClick}>
            <WriteComment>삭제</WriteComment>
          </TouchableOpacity>
        </WriteContainer>
      ) : null}
    </Container>
  );
}

Answer 1

Change renderComment as

const renderComment = ({ item: comments }) => {
     const photoIdobj = { photoId: `${route.params.photoId}` };
     const passedComments = { ...comments, ...photoIdobj };
    return <CommentRow {...passedComments} />;
  };

and call photoId from CommentRow like

export default function CommentRow({
  id,
  user,
  payload,
  isMine,
  createdAt,
  updatedAt,
  commentNumber,
  photoId
})