title: ReactJS - cannot read property 'props' of undefined
body: <p>I am practicing React native. When I compile the following program, I am getting Cannot read property 'props' of undefined error for Details.js. Kindly let me know as to what went wrong here. </p>
  
  <p>Layout.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import Header from './Header';
  import Details from './Details';
  
  export default class Layout extends React.Component {
  constructor(props){
    super(props);
      this.state = {
                       heading: "Welcome no-name guy!",
                       header: "I am your header",
                       footer: "I am your footer"
                   };
                 }
  
  render() {
     return (
             &lt;div&gt;
              &lt;Header headerprop={this.state.header} /&gt;
              &lt;Details detailprop={this.state.heading} /&gt;
            &lt;/div&gt;
            );
           }
  }
  </code></pre>
  
  <p>Details.js</p>
  
  <pre><code>import React from 'react';
  
  const Details = (detailprop) =&gt; {
   return (
    &lt;div className="heading-style"&gt;{this.props.detailprop}&lt;/div&gt;
   );
   };
  Details.bind(this);
  export default Details;
  </code></pre>
  
  <p>Header.js</p>
  
  <pre><code>import React, {Component} from 'react';
  
  export default class Header extends React.Component {
   render(){
             return(
                     &lt;div&gt;{this.props.headerprop}&lt;/div&gt;
                   );
            }
   }
  </code></pre>