Ad

React Child Component Render Error

Here is the code:

import React from 'react';
import Tabs from './TabParent.jsx';

var Topbar = React.createClass ({
    propTypes : {
        tbOptionsMenu : React.PropTypes.bool.isRequired,
        lftSideEle : React.PropTypes.bool.isRequired,
        typeOfTransaction : React.PropTypes.number,
        tabAttr : React.PropTypes.array.isRequired
    },

    getDefaultProps : function () {
        return ({
            tabAttr : [
                {
                    tabClassName : 'tabPreview tab',
                    tabName : 'Preview'
                },
                {
                    tabClassName : 'tabBody tab',
                    tabName : 'Body'
                },
                {
                    tabClassName : 'tabSleeve tab',
                    tabName : 'Sleeve'
                }
            ]
        });
    },

    render : function () {
        var tbOptionsMenu = (
            <div id="tbOptionsMenu" className="tbIcon" data-action="menuItem-main" data-tooltip="MENU : Why not take a peek, for you may find what you seek...">i</div>
        );

        var lftSideEle = (
            <div className="tbDetails tbBrandParent">
                <div className="mainHeading tbBrandName" data-tooltip="Your Brand Name" data-action="labelmenu-open">Brand Name</div>
                <div className="mainHeading tbDesignName" data-tooltip="Your Design Name">a new design</div>
            </div>
        );

        return (
            <div className='topBar'>
                {this.props.tbOptionsMenu && tbOptionsMenu}
                {this.props.lftSideEle && lftSideEle}
                <Tabs {this.props.tabAttr}> </Tabs>
            </div>
        );
    }
});

export default Topbar;

Webpack reports an error on render of the component 'Tabs'.Error is the unhelpful: 'Module build failed: SyntaxError: .... unexpected token at line...'

Omitting the line, the rest of the code works fine.

Ad

Answer

Try to

<Tabs tabAttr={this.props.tabAttr} />

instead of

<Tabs {this.props.tabAttr}> </Tabs>

You can read more about this here https://facebook.github.io/react/docs/jsx-in-depth.html

Ad
source: stackoverflow.com
Ad