CODEWITHSUNDEEP
javascriptreactjs
ADITYA BISOI
ADITYA BISOI

Reputation: 121

Warning: Functions are not valid as a React child.This may happen if you return a Component instead of <Component /> from render

I get the above error when I try to display {props.child}.The page remains blank.The detailed warning is

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (at CustomLayout.js:28)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at CustomLayout.js:22)
    in section (created by BasicLayout)
    in BasicLayout (created by Context.Consumer)
    in Layout (at CustomLayout.js:8)
    in CustomLayout (at App.js:10)
    in div (at App.js:9)
    in App (at src/index.js:7)

Below are the project files. Article.js is a component and ArticleListView and CustomLayout are containers to it. I am trying to access the child elements in CustomLayout.js by {props.children}

App.js

import React from 'react';
import './App.css';
import 'antd/dist/antd.css';
import CustomLayout from './containers/CustomLayout'
import ArticleListView from './containers/ArticleListView'; 

function App() {
  return (
    <div className="App">
        <CustomLayout>
            {ArticleListView}
        </CustomLayout>
    </div>
  );
}

export default App

ArticleListView.js

import React from 'react'
import Article from '../components/Article'

class ArticleListView extends React.Component{
    render(){
        return(
            <Article/>
        );
    }
}

export default ArticleListView

Article.js

import React from 'react'

import { List, Avatar, Icon } from 'antd';

const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'http://ant.design',
    title: `ant design part ${i}`,
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

function Article(props){
    return(
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
            onChange: page => {
                console.log(page);
            },
            pageSize: 3,
            }}
            dataSource={listData}
            footer={
            <div>
                <b>ant design</b> footer part
            </div>
            }
            renderItem={item => (
            <List.Item
                key={item.title}
                actions={[
                <IconText type="star-o" text="156" key="list-vertical-star-o" />,
                <IconText type="like-o" text="156" key="list-vertical-like-o" />,
                <IconText type="message" text="2" key="list-vertical-message" />,
                ]}
                extra={
                <img
                    width={272}
                    alt="logo"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
                }
            >
                <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.href}>{item.title}</a>}
                description={item.description}
                />
                {item.content}
            </List.Item>
            )}
        />
    );
}



export default <Article/>

CustomLayout.js

import React from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;

function CustomLayout(props){
  return(
        <Layout className="layout">
        <Header>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>{props.children}</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
  );
}

export default CustomLayout

Upvotes: 5

Views: 16567

Answers (4)

NIKHIL DANGI
NIKHIL DANGI

Reputation: 147

in javascript we work like isConditionTrue ? screenOne :screenTwo

but in typescript we have to change isConditionTrue ? :

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

If you are using any javascript expression then only use curly braces like - {a+b}.

but form html tags or react component you need to import as per react standard.

Use like this

<CustomLayout>
 <ArticleListView />
</CustomLayout>

and change your export default <Article/> to export default Article

Upvotes: 3

brycelikesdogs
brycelikesdogs

Reputation: 151

Try

<CustomLayout>
 <ArticleListView />
</CustomLayout>

rather than 

<CustomLayout>
  {ArticleListView}
</CustomLayout>

Upvotes: 0

Jayce444
Jayce444

Reputation: 9063

It should be <ArticleListView/>, not {ArticleListView}

Upvotes: 2

Related Questions