title: Best way to use composition for replacing child component methods in React?
body: <pre><code>class DropZoneComp extends React.Component &lt;any, any&gt;
  {
  
      onDrop (file) {
  
      }
      render() {
          return ( &lt;DropZone onDrop={this.onDrop.bind(this)}&gt;&lt;/DropZone&gt;)
      }
  }
  
  export default function DropZoneParent(props) {
      const onDrop = () =&gt; {
  
      }
      return (
          &lt;DropZoneComp onDrop={onDrop}/&gt;
      )
  }
  </code></pre>
  <p>The issue I realized is that the class component functions aren't props, so you can't really pass them, but maybe there's a way to do this without breaking anything. One issue is that it's not a prop so I can't really replace it, the other issue is if onDrop change class variable that are not props, and so if I want to pass onDrop from the parent component, I need to store the same non props or instance or state variables in the parent class. What are the best practices and the cleanest way to go about it, especially if onDrop has to call setState and change instance variable (ex: this.files, this.currentFile, etc.)?</p>