title: How to pass data between functional components in React?
body: <p>In React we can pass data between class based components using states and props in the following manner:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import Name from './Name';
  import React, { Component } from 'react'
  
  
  export class App extends Component {
    state = {
      name: "Tarun"
    }
  
    render() {
      return (
        &lt;Name name={this.state.name}/&gt;        
      )
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>Name.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  
  export class Name extends Component {
      render() {
          return (
              &lt;div&gt;
                  My name is : {this.props.name}
              &lt;/div&gt;
          )
      }
  }
  
  export default Name
  </code></pre>
  
  <p>But now since React has introduced functional components what is the equivalent code if I use functional components for both <code>App.js</code> and <code>Name.js</code>?</p>