Why I can not pass a function within two render functions?-CodePudding

I am writing a simple app where I render media (photos or videos). Depending on the rendering object, I have to pass one of the following functions: removePhoto or removeVideo. So first I have tried the following:

export const renderMedia = (media, removePhoto, removeVideo) => {
  console.log("media: ", media);
  if (media && media.length > 0) {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={media}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
            let itemUri;
            if (item.video && item.thumbnail) {
              itemUri = item.thumbnail;
            } else if (item.uri) {
              itemUri = item.uri;
            } else {
              itemUri = item;
            }
            return (
              <TouchableOpacity
                style={{ flex: 1 / 3, borderColor: "#cbe6ef", borderWidth: 2 }}
              >
                <Image
                  style={{ flex: 1 / 3, aspectRatio: 1 / 1 }}
                  source={{ uri: itemUri }}
                />

                <TouchableOpacity
                  onPress={() => {
                    console.log("item? ", item.type);
                    item.type === "video" ? removeVideo() : removePhoto(item);
                  }}
                  style={{
                    alignSelf: "flex-end",
                    position: "absolute",
                  }}
                >
                  <Ionicons
                    name="close-circle-outline"
                    size={34}
                    color="black"
                    style={{ alignSelf: "center", padding: 5 }}
                  />
                </TouchableOpacity>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    );
  }
};

The removeVideo and removePhoto methods do work, but the above code is ugly. So I tried to break t down the following way:

export const renderMedia = (media, removePhoto, removeVideo) => {
  if (media && media.length > 0) {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={media}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
            let itemUri;
            if (item.video && item.thumbnail) {
              console.log("remove video: ", removeVideo);
              renderVideo(item, removeVideo);
            } else {
              renderPhoto(item, removePhoto);
            }
          }}
        />
      </View>
    );
  }
};

and then:

const renderVideo = (props) => {
  console.log("render video props: ", props);
};

What I see one the console:

media:  Array [
  Object {
    "thumbnail": "some.jpg",
    "video": "some.mp4",
  },
]
remove video:  [Function removeVideo]
render video props:  Object {
  "thumbnail": "some.jpg",
  "video": "some.mp4",
}

That is I dont pass removeVideo function. I dont see it on the properties of renderVideo or whatsoever. Can someone explain my why and how to pass it?

EDIT:

This is my removeVideo function within my parent component:

function removeVideo() {
    console.log("video removed. should cause component to rerender?");
    setEditedObject({
      ...editedObject,
      video: null,
    });
  }

CodePudding user response：

When calling renderVideo, you are passing 2 values item and removeVideo method. But in function definition you have just taken one argument i.e. props which will hold value of item

const renderVideo = (props, removeVideo) => {
  // Here you will get your item in props
  // and removeVideo as function you have passed.
};

Or if you want it in a single variable, you have to pass it as an object.

Indirectly it is a function only and not a component. If you are passing something as a props, then you can get it in a single variable as a object but here renderVideo() is simple function so you have to take care about arguments as well.