title: How to check if a component prop is a function in React?
body: <p>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.</p>
  
  <p>For example</p>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>render(&lt;MyComponent d={data} showName = {d =&gt; d.name + ' ' + d.surname}/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p><strong>MyComponent.jsx</strong></p>
  
  <pre><code>class MyComponent extends React.Component {
      render() {
          return &lt;h1&gt;if (typeof this.props.showName === 'function') {
              //call this.props.showName(d)
          }
      }
  }
  </code></pre>
  
  <p><strong>edit</strong></p>
  
  <p>I want the showName prop to be either a function or a value and the component doesn't need to know about it beforehand.</p>
  
  <p><strong>edit2</strong></p>
  
  <p>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 </p>
  
  <pre><code>&lt;MyComponent value="some value"/&gt; 
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;MyComponent calculatedValue = {// a function}/&gt;
  </code></pre>