Which is better practice: Passing function as prop or send an object?

(Jay Porta) #1

I’m curious about which is considered by React Developers to be the better option (or at least more widely accepted among React Develoeprs) when using a custom button in React Native…

I’ve created a custom button component using TouchableOpacity. At first I decided to pass the function as a prop and just run it on the onPress. But I was told that I shouldn’t pass a function as props, and that a better option would be to send an object containing things I need for the function, and put the function inside the CustomButton class.

I prefer passing the function as props so that the CustomButton can be a dumb component that will run whatever function I give it. But I’ve been a React Developer for a shorter period of time than the person who told me to not to pass the function as props. However, I’ve seen “pass the function as props” as a top voted answer on StackOverflow, so I thought I’d try here to see what you all think.

Which is better:

<CustomButton onPress={()=>{this.myFunction()} />

or

<CustomButton dataForFunction={{key: value, key: value, key: value}} /> // And let the component use the object as a payload sent to a function which lives in its parent class.

For instance, in CustomButton class:

class CustomButton ... {

    handleClick =(payload)=> {
       ...
    }

    render() {
        return (
            <TouchableOpacity onPress={ (this.props.dataForFunction) => {this.handleClick(this.props.dataForFunction)} } />
        );
    }
}
(Andre Glegg) #2

I dont see any problem with using one or the other it just depends on what exactly you are doing… For example if I have a ./ListItems/ListItems.js and a ./ListItems/Item/Item.js then I pass a Object to ListItems.js and map it there.

(Michelle de Beus) #3

For your button, I think a function makes much better sense than an object - but I would call it onClick instead of onPress to be consistent with the OnClick method in HTML. Passing an object to a method does make your code more extensible because parameters are ordered and when adding new parameters to the method, you only need to change the calling code that needs to specify the new parameters. However, React components take a list of properties that are not required to be present and are not ordered - so you can allow some of those properties to be undefined and give them defaults (via defaultProps). I would encourage you to check out some React GUI Frameworks to see how they implement their controls. I use Semantic-UI-React for example - check out what they do for a button: https://react.semantic-ui.com/elements/button

(Adam Skinner) #4

I suppose it depends on the context of the possible actions for the onPress invocation. If the action is always the same and it just needs some data, pass the data in as props so it can work with it.

As an aside, you’re unnecessarily creating a new function definition in the above onPress event.

try

<CustomButton onPress={this.myFunction} />

instead.