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}/>