CODEWITHSUNDEEP
reactjs
Minsub Yoon
Minsub Yoon

Reputation: 135

react - children component not showing

I'm trying to insert a child component inside another child component, but my code is not working. Following codes are the structure i'm trying to build.

const AddProductPage= () => {
    return (
        <PageTemplate>
            <ProductTemplate>
                <AddProduct />
            </ProductTemplate>
        </PageTemplate>
    );
};

const PageTemplate= ({children}) => {
    return (
        <div className={cx('pagetemplate')}>
            <HeaderContainer />
            <main>
                {children}
            </main>
            <Footer />
        </div>
    );
};

class ProductTemplate extends Component {
    render() {
        return (
            <div className={cx('product-template')}>
                ...
                <div className={cx('display')}>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

class AddProduct extends Component {
    render() {
        return (
            <div className={cx('addproduct')}>
                addproduct
            </div>
        );
    }
}

I'm trying to insert AddProduct component in ProductTemplate component as a child, which is inserted in PageTemplate component as a child. AddProductPage, however, is not showing AddProduct component. I'd be grateful if anyone can help.

Upvotes: 1

Views: 4294

Answers (2)

Danish
Danish

Reputation: 912

I've run your code. May be you'r missing default export statements.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AddProductPage from './AddProductPage';
ReactDOM.render(<AddProductPage />, document.getElementById('root'));

AddProductPage.js

import React from 'react';
import PageTemplate from './PageTemplate';
import ProductTemplate from './ProductTemplate';
import AddProduct from './AddProduct';

const AddProductPage= () => {
return (
    <PageTemplate>
        <ProductTemplate>
            <AddProduct />
        </ProductTemplate>
    </PageTemplate>
);
};

export default AddProduct;

PageTemplate.js

import React from 'react';

const PageTemplate= ({children}) => {
return (
    <div>
        <main>
            {children}
        </main>
    </div>
);
};

export default PageTemplate;

ProductTemplate.js

import React,{Component} from 'react';

class ProductTemplate extends Component {
render() {
    return (
        <div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
};
};

export default ProductTemplate;

AddProduct.js

import  React, {Component} from 'react';

class AddProduct extends Component {
render() {
    return (
        <div>
            addproduct
        </div>
    );
};
};

export default AddProduct;

Output is this : addproduct

Upvotes: 2

RohanS404
RohanS404

Reputation: 51

Here`s a Fiddle of your code

Works Fine!. I have removed cx API. I suppose the problem might be with className resolution. Check in the dom hierarchy weather the Children DOM Node exists and they have received their respective classnames. 

const PageTemplate= ({children}) => {
return (
    <div className={'pagetemplate'}>
        <HeaderContainer />
        <main>
            {children}
        </main>
        <Footer />
    </div>
 );
};

Upvotes: 1

Related Questions