I am practicing React native. When I pile 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.

Layout.js

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: "Wele no-name guy!",
                     header: "I am your header",
                     footer: "I am your footer"
                 };
               }

render() {
   return (
           <div>
            <Header headerprop={this.state.header} />
            <Details detailprop={this.state.heading} />
          </div>
          );
         }
}

Details.js

import React from 'react';

const Details = (detailprop) => {
 return (
  <div className="heading-style">{this.props.detailprop}</div>
 );
 };
Details.bind(this);
export default Details;

Header.js

import React, {Component} from 'react';

export default class Header extends React.Component {
 render(){
           return(
                   <div>{this.props.headerprop}</div>
                 );
          }
 }

I am practicing React native. When I pile 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.

Layout.js

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: "Wele no-name guy!",
                     header: "I am your header",
                     footer: "I am your footer"
                 };
               }

render() {
   return (
           <div>
            <Header headerprop={this.state.header} />
            <Details detailprop={this.state.heading} />
          </div>
          );
         }
}

Details.js

import React from 'react';

const Details = (detailprop) => {
 return (
  <div className="heading-style">{this.props.detailprop}</div>
 );
 };
Details.bind(this);
export default Details;

Header.js

import React, {Component} from 'react';

export default class Header extends React.Component {
 render(){
           return(
                   <div>{this.props.headerprop}</div>
                 );
          }
 }

• javascript
• reactjs
• react-native

3 Answers 3

In functional ponents, the props are passed as the first parameter. So, you only need to do this:

const Details = (props) => {
    return (
        <div className="heading-style">{props.detailprop}</div>
    );
};

If you know the prop that you want to handle you can destructure that prop:

const Details = ({ detailProp }) => {
    return (
        <div className="heading-style">{detailprop}</div>
    );
};

Your ponent argument should be props:

const Details = (props) => {
 return (
  <div className="heading-style">{props.detailprop}</div>
 );
 };

It could be detailprop as you have (or anything for that matter) but you would then need to access the prop by the confusing call:

detailprop.detailprop

props is the idiomatic approach for React.

Details.js is a stateless functional react ponent. https://facebook.github.io/react/docs/ponents-and-props.html

It receives props as its argument. You don't need this here.

import React from 'react';

const Details = (props) => {
 return (
  <div className="heading-style">{props.detailprop}</div>
 );
 };
Details.bind(this); // you don't need this
export default Details;

Also, div elements will not work for react-native . Please refer react native docs https://facebook.github.io/react-native/