Is there a way to pass in a child component to the renderRow api ?

[ryndm]

So I want to pass a functional component to the renderRow api. Currently I have been passing a function present in the same component. I was not able to find any relevant information anywhere. Is it possible to do that?

[donni106]

Can you show some code to check, what you are trying? I think it should be possible through the existing renderRow prop, which is wrapped by the renderRowComponent prop. If no renderRowComponent is given, it will be TouchableOpacity for iOS and TouchableHighlight for Android. The row itself is rendered as follows, depending on if renderRow is given or not https://github.com/siemiatj/react-native-modal-dropdown/blob/619ca1aaeb5fb100d34f2598eca38f532777285a/components/ModalDropdown.js#L391-L405

[ryndm]

  MainDropDown = () => {
    return (
      <View>
            ......
            .....
            .....
      </View>
    );
  };

<ModalDropdown renderRow={this.MainDropDown} />

Currently MainDropDown is a function present in the same class so I don't need to pass any props. If I convert it into a functional component I'll need to pass props. Is that possible here ? I was not able to figure out the right syntax. Please excuse my ignorance I am a beginner.

[donni106]

And what is the problem this way? It should be a possible way. You can try to log some stuff to see more whats going on.

MainDropDown = (item, index, highlighted) => {
  console.log({ item, index, highlighted });

    return (
      <View>
            <Text>{item.toString()}</Text>
      </View>
    );
  };

The object passed in to renderRow needs to be a function, which is called inside the package at line 404 when viewing the code snippet above. What is your situation that you would need to pass props there?

I haven't tested it, but does this successfully render and show you your data passed to the dropdown?