title: Unable to pass function in props to a Component | React
body: <p>I am trying to pass the function onSearchChangeEvent() from my App.js to Searchbox component as a function but I am getting the error saying</p>
  
  <blockquote>
    <p>Expected <code>onChange</code> listener to be a function, instead got a value of
    <code>object</code> type.</p>
  </blockquote>
  
  <p>I looked up to different answers on Stackoverflow for the same error but I am unable to resolve this issue. </p>
  
  <p><strong>App.js :</strong> Contains the function <strong>onSearchChangeEvent()</strong> I am trying to pass to a <strong>&lt; Searchbox /></strong> component.</p>
  
  <pre><code>import React, {Component} from 'react';
  import Cardlist from './Cardlist';
  import Searchbox from './Searchbox';
  import {robots} from './robots';
  
  class App extends Component {
      constructor () {
          super()
          this.state = {
              robots : robots,
              searchfield : ''
          }
      }
  
      onSearchChangeEvent = () =&gt; {
          console.log("Something Happened");
      }
  
      render () {
          return (
              &lt;div className='tc'&gt;
                  &lt;h1&gt;Robo Friends&lt;/h1&gt;
                  &lt;Searchbox searchChange={() =&gt; this.onSearchChangeEvent}/&gt;     
                  &lt;Cardlist robots={this.state.robots} /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Searchbox.js</strong></p>
  
  <pre><code>import React from 'react';
  
  const Searchbox = (searchField, searchChange) =&gt; {
      return (
          &lt;div className='pa2'&gt;
              &lt;input 
                  className='pa3 ba b--green bg-lightest-blue'
                  type='search' 
                  placeholder='Search Robots'
                  onChange={searchChange}
              /&gt;
          &lt;/div&gt;
      );
  }
  
  export default Searchbox;
  </code></pre>
  
  <p><strong>Error :</strong> First I get the warning, when the event is triggered I get the error</p>
  
  <p><a href="https://i.stack.imgur.com/xLZOo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xLZOo.jpg" alt=""></a> </p>