title: Any better way to pass data from a child component to a function in a parent component without using bind()?
body: <p>I'm using <code>React.Context</code> to pass a function down to child component which is inside another component. See figure down below. 
  I'm quite not comfortable using <code>.bind()</code> in order to pass the name variable to the function in the parent component. </p>
  
  <p>Is there a better way to pass data from a child component to a function in a parent component without using <code>.bind()</code>? </p>
  
  <p>See my code below:</p>
  
  <pre><code>import React, { Component, createContext } from 'react'
  
  const AppContext = createContext()
  
  class ComponentOne extends Component {
  
      const handleClick = (name)=&gt; {
          alert(`Hello ${name}`)
      }
  
      render(){
  
          return(
              &lt;AppContext.Provider 
                value={{
                    handleClick: this.handleClick
                }}&gt;
                &lt;p&gt;Hello from ComponentOne&lt;/p&gt;
              &lt;/AppContext.Provider&gt;
  
          )
      }
  }
  
  const ComponentThree = props=&gt; {
      const name = "lomse"
  
      return(
         &lt;AppContext.Consumer&gt;
            (context=&gt;(
               &lt;button onClick={context.handleClick.bind(null, name)}&gt;Click me!&lt;/button&gt;
            ))
         &lt;/AppContext.Consumer&gt;
      )
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/n6Aae.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n6Aae.jpg" alt="enter image description here"></a></p>