How to check if a component prop is a function in React?

Question

I want to pass a function to a component as a prop and use it in its render function, I seem to be missing a key concept here.

For example

index.jsx

render(<MyComponent d={data} showName = {d => d.name + ' ' + d.surname}/>, document.getElementById('app'));

MyComponent.jsx

class MyComponent extends React.Component {
    render() {
        return <h1>if (typeof this.props.showName === 'function') {
            //call this.props.showName(d)
        }
    }
}

edit

I want the showName prop to be either a function or a value and the component doesn't need to know about it beforehand.

edit2

On second thought, I think I'll build a component so it can use both a function and a value as a prop, but keep them separate so that I can validate them better. E.g. I'll either use

<MyComponent value="some value"/> 

or

<MyComponent calculatedValue = {// a function}/>

Answer 1

Write it like this:

checkMethod(){
    if(typeof(this.props.showName) === 'function') {
        //call this.props.showName(d);
        return null;
    }else{
        return this.props.showName;
    }    
}

class MyComponent extends React.Component {
    render() {
        return 
            <h1>
                {this.checkMethod()}
            </h1>
        }
    }
}

Answer 2

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

You can do it like this and if it's not a function it will tell you:

     MyComponent.propTypes = {
           showName: React.PropTypes.func.isRequired
     };

This is the react way to do it ;)

Edit: I got it now, you can do an assertion on the prop by calling it with an argument, if the assertion fails, you'll know it's not a function. Check this package on npm, it's easy to use it out of the box

https://www.npmjs.com/package/assert

Answer 3

class MyComponent extends React.Component {
    render() {
        return <h1>if (typeof this.props.showName === 'function') {
            //call this.props.showName(d)
        }
    }
}

Your above code seems fine. But your approach is wrong.

You need to validate props using propTypes

MyComponent .propTypes = {
showName : React.PropTypes.func
};

Here is the other checks,

propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object

---

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};