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

failed prop type: the prop is marked as required in but its value is undefined
the prop dispatch is marked as required but its value is undefined
the prop query is marked as required in query but its value is undefined
the prop renderitem is marked as required in carousel but its value is undefined
the prop courses is marked as required in coursespage but its value is undefined
the prop data is marked as required in dataprovider but its value is undefined
failed prop type the prop classes is marked as required in app but its value is undefined
failed prop type the prop children is marked as required in dropdownmenu but its value is null

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?

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.

Warning: Failed prop type: The prop `children` is marked as required , Warning: Failed prop type: The prop `children` is marked as required in `Button`, but its value is `undefined` #78. Closed. simkimsia opened this issue on Sep 7,  Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined` 0 trying to fetch data from api and show it in react native flatlist and my code displays data in console log,but it didnt render in emulator

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.

React and Semantic-ui-react - reactjs, The prop `children` is marked as required in `AppBar`, but its value is `undefined` - reactjs. The prop theme is marked as requried but it's value is 'undefined' #9470. carpben opened this issue Dec 11, 2017 · 6 comments. The top component is AppContainer, which yields the App component which build as a class. App component is wrapped with the MuiThemeProvider wrapper, which has one child - div element.

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

material-ui/core @ 3.5.1 .. 3.9.3 - Package Diff, Then for its render-function - you use the DropDown components as you want The prop children is marked as required in AppBar, but its value is undefined. Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined. in Router (at router.js:13) printWarning @ warning.js:36 warning @ warning.js:60 checkReactTypeSpec @ checkReactTypeSpec.js:80 validatePropTypes @ ReactElementValidator.js:151 createElement @ ReactElementValidator.js:194 (anonymous) @ router.js:

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

Warning: Failed prop type: The prop `theme` is marked as required , Warning: Failed prop type: The prop `theme` is marked as required in is marked as required in MuiThemeProviderOld , but its value is undefined . import AppBar from '@material-ui/core/AppBar'; {this.props.children} The prop `styles` is marked as required in `FelaTest`, but its value is `undefined`. What is odd is that if I log out styles from within the render method I never see an undefined value, just the styles object so it doesn't appear that undefined is actually passed in.

Failed prop type: The prop `children` is marked as required in , Ask questionsFailed prop type: The prop `children` is marked as required in `​ReactNativeModal`, but its value is `undefined`. I pasted the code from  warning.js:35 Warning: Failed prop type: The prop `theme` is marked as required in `MuiThemeProvider`, but its value is `undefined`. in MuiThemeProvider (created by App) in App in Router (created by ConnectedRouter) in ConnectedRouter in IntlProvider (created by LanguageProvider) in LanguageProvider (created by Connect(LanguageProvider)) in Connect(LanguageProvider) in Provider

Popover API, Learn more about the props and the CSS customization points. children, node, The content of the component. Follow this guide to learn more about the requirements for this component. Alert · Alert Title · App Bar · Autocomplete · Avatar · Avatar Group · Backdrop · Badge · Bottom Navigation · Bottom Navigation Action  The context `router` is marked as required in `Link`, but its value is `undefined`. #4759 lucascavalcante opened this issue Mar 16, 2017 · 15 comments Comments

purescript-react-basic-mui, Warning: Failed prop type: The prop `children` is marked as required in `​ForwardRef(Button)`, but its value is `undefined`. M.appBar { position: M.​position.sticky , children: [ M.grid { container: true , children: [ M.iconButton { edge: M.edge.start  The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router (5) I also write a Login practice. And also meet the same question like you.

Comments
  • What is version of the material-ui?