The prop `children` is marked as required in `AppBar`, but its value is `undefined`

Question

I want to use native Material-ui component but have this error in browser :

index.js:2178 Warning: Failed prop type: The prop children is marked as required in AppBar, but its value is undefined.

My component is:

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const Header = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default Header;

Help me to understand why?

Answer 1

I have the same problem with ^1.0.0-beta.38 and I found solution. This caused by incompatibility with new library api. According to issue https://github.com/mui-org/material-ui/issues/6446, library actively reworking now, but documentation have not updated yet. It seems, that new version library provide required children validation props for AppBar component. if you look at react dev-tool inspector you will see that AppBar have not children at Props:

Logically, you need to put children node ToolBar and Typography children into AppBar like this:

import React, { Component } from 'react'
import { AppBar } from 'material-ui'

class App extends Component {
  render() {
    return(
      <AppBar>
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar> 
      </AppBar>
    );
  }
}

Into react inspector you could see new child prop.

Answer 2

I found this question when getting the following error:

Warning: Failed prop type: The prop children is marked as required in ForwardRef(Container), but its value is undefined.

The problem was that without realising I had stupidly removed all the children from a <Container> element. I didn't understand the error message straight away and the error didn't point clearly to a file in project so leaving this answer here in case others make the same silly mistake.

Answer 3

The children is the component embraced by your main component, so it should be :

<AppBar
  title="Title"
  iconClassNameRight="muidocs-icon-navigation-expand-more"
>
  <ChildrenComponent />
</AppBar>

If you don't need any children, you don't have to put it as required.

Answer 4

When it runs for the first time as there is no value in Props , so it will come up as undefined , you can avoid this error be setting defaultProps and giving it a property isNotNull:

import PropTypes from "prop-types";

ComponentName.defaultProps = {
  input: PropTypes.isNotNull // you can amend this accordingly
}

NOTE : If you want to allow null use isDefined and if you want to allow undefined then use isNotNull like (You can amend it accordignly):

PropTypes.string.isDefined // allows null but not undefined
PropTypes.string.isNotNull // allows undefined but not null

You can read more about Typechecking with propTypes On React Documentation

Answer 5

I was Getting this error while using a theme wrapper in Gatsby. The error only exists in development mode, and once build and served it goes away.

Answer 6

They have now updated the documentation (https://material-ui-next.com/)