React component: cannot read property of undefined error

Question

I am currently having a problem rendering a React wrapper component in another component. Basically, I export default the wrapper component (CreatePage), and then try to import it into another component (EditPage), but am getting the error "Cannot read property pageType of undefined." pageType is a prop for CreatePage that I define, but the weird thing is I have debuggers in the render functions of both Components and neither is being hit, so I think there's an issue with the component itself for some reason but I'm not sure quite what. Here is the code from the EditPage for some context:

import React, { Component, PropTypes } from 'react';
import CreatePage from './CreatePage';
import withResource from '../../../../lib/withResource';


export class EditPage extends Component {
    constructor(props){
        super(props);
    }

    render() {
        debugger;
        return (
            <div>
                <CreatePage pageType={'edit'}/>
            </div>
        );
    }
}

export default withResource(
{
    name: 'EditResource',
    key: 'hello',
    }, 
EditPage);

Code for CreatePage:

export default class CreatePage extends Component {

    constructor(props) {
        super(props);
    }

    headerTitles = {
        'create': i18n._('Create', '[m10n]'),
        'edit': i18n._('Edit', '[m10n]'),
    }

    renderHeader(pageType) {
        return (
            <div className={cx('headerWrapper')}>
                <div className={cx('header')}>
                    <div className={cx('title')}>
                        {this.headerTitles[pageType]}
                    </div>
                </div>
            </div>
        );
    }

    renderCreateEditPage(pageType) {
        return (
            <div>
                {this.renderHeader(pageType)}
                <div className={cx('contentWrapper')}>
                    <div>
                        <NameTag type={'pageType'}/>
                    </div>
                </div>
            </div>
        );
    }

    render() {
        return (
            <div className={cx('pageWrapper')}>
                {this.renderCreateEditPage(this.props.options.pageType)}
            </div>
        );
    }
}

Can you provide code of CreatePage?

Yozi
– Yozi

2016-07-30 22:08:32 +00:00
Commented Jul 30, 2016 at 22:08 — Yozi
– Yozi, Commented Jul 30, 2016 at 22:08
Just added it to the post as an edit.

user3802348
– user3802348

2016-07-31 00:39:01 +00:00
Commented Jul 31, 2016 at 0:39 — user3802348
– user3802348, Commented Jul 31, 2016 at 0:39

John · Accepted Answer · 2016-07-31 06:49:46Z

2

CreatePage is looking in this.props.options.pageType but you just passed in pageType directly.. no mention of an options prop

answered Jul 31, 2016 at 6:49

John

2,8942 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3802348 Over a year ago

Totally overlooked this! It's working now, I really appreciate it :)

Collectives™ on Stack Overflow

React component: cannot read property of undefined error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related