Failed propType: Invalid prop `Children` supplied to`Router`

Asked

Viewed 812 times

10

I created a project to study React and I’m trying to uncouple my Header from the app by creating a component for it. I created a file Header.jsx and passed the code there but I’m getting the following error:

Failed propType: Invalid prop children supplied to Router. Check the render method of Header.

Header.jsx

import React, { Component, PropTypes } from 'react';
import Link from 'react-router';
import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

const activeClassName = 'active';

class Header extends Component{
  render() {
    <div>
      <Header title="React SaaS" scroll>
        <Navigation>
          <Link activeClassName={activeClassName} to="/home">Home</Link>
          <Link activeClassName={activeClassName} to="/login">Login</Link>
        </Navigation>
      </Header>
      <Drawer title="React SaaS">
        <Navigation>
          <Link to="/home">Home</Link>
          <Link to="/login">Login</Link>
        </Navigation>
      </Drawer>
    </div>
  }
};

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]),
};

export default Header;

app.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import Router from 'react-router';
import { IndexRoute, Link, Route } from 'react-router';
import ReactMDL from 'react-mdl';
import { Layout , Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

import Header from './components/Header.jsx';
import Login from './components/Login.jsx';
import Home from './components/Home.jsx';

class App extends React.Component{
  render() {
    return (
      <div className="big-content" style={{height: '300px', position: 'relative'}}>
        <Layout>
          <Header />
          <div className="wrapper">
              {this.props.children}
          </div>
        </Layout>
      </div>
    )   ;
  }
};

let routes = (
  <Route path="/" component={App}>
    <Route path="home" component={Home}/>
    <Route path="login" component={Login}/>
  </Route>
);

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'))

Any idea what’s going on?

javascript react

  • Managed to solve

  • The problem hasn’t been solved yet. For system needs I needed to change this whole component and it ended up working, but I’ll leave the question open so that, if anyone knows the answer to this specific case, your solution helps the community.

  • 3

    It seems that your Component Header has render but there is no Return() inside the render.. the render must have a Return

  • True @Guilhermelouro, hadn’t noticed this at the time.

1 answer

1

Two problems I noticed in the Component Header

You perform the import of Header of react-mdl as HeaderMDL

import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

After that you define your component of Header.

class Header extends Component

However, within the component Header that you’re defining you call the Header of react-mdl as Header again, making confusion with the definition you just made. At this point you should call HeaderMDL because it defined that it would be imported so.

render() {
return (
  <div className="big-content" style={{height: '300px', position: 'relative'}}>
    <Layout>
      <Header /> /* Mudar aqui para HeaderMDL */
      <div className="wrapper">
          {this.props.children}
      </div>
    </Layout>
  </div>
)   ;

Also you do not need to validate the propType childreen because it does not use anything in the Header.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.