Warning: Failed prop type: The prop children is marked as required in Button, but its value is undefined

[simkimsia]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When the edit form is submitted, there should be no unusual console errors

Current Behavior

What is the current behavior?

I created a form using your regular form and then the form url is /users/edit/1. when I go to the webpage displaying the form at /users/1 I get this view

And I get the following error

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

My EditUser.js

My BaseForm.js

import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardText from "components/Card/CardText.jsx";
import CardBody from "components/Card/CardBody.jsx";
import Button from "components/CustomButtons/Button.jsx";
import regularFormsStyle from "assets/jss/material-dashboard-pro-react/views/regularFormsStyle";

class BaseForm extends React.Component {

  render() {
    const {
      classes,
      title,
      children,
      handleSubmit,
      errors
    } = this.props;

    return (
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Card>
            <CardHeader color="rose" text>
              <CardText color="rose">
                <h4 className={classes.cardTitle}>{title}</h4>
              </CardText>
            </CardHeader>
            <CardBody>

              <div>{errors}</div>

              <form>
                {children}

                <Button color="rose" onClick={handleSubmit}>Submit</Button>

              </form>
            </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    );
  }
}

export default withStyles(regularFormsStyle)(BaseForm);

My UserForm.js

import React from "react";
import {withRouter} from 'react-router-dom';
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import dashboardStyle from "material-dashboard-pro/assets/jss/material-dashboard-pro-react/views/dashboardStyle";
import "tableup/css/tableup.css";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import BaseForm from "components/Base/BaseForm";


class UserForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      logged_in: localStorage.getItem('token') ? true : false,
      first_name: props.first_name || '',
      username: props.username || '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentWillMount() {
    if (!this.state.logged_in) {
      this.props.history.push("/accounts/login");
    }
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleSubmit() {
    this.props.handleSubmit(this.state)
  }

  render() {
    const {
      title,
      errors
    } = this.props;

    return !this.state.logged_in ? '' :
      <BaseForm title={title} handleSubmit={this.handleSubmit} errors={errors}>
        <CustomInput
          labelText="First Name"
          id="id_first_name"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "first_name",
            value: this.state.first_name
          }}
        />
        <CustomInput
          labelText="Username"
          id="id_username"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "username",
            value: this.state.username
          }}
        />
      </BaseForm>
  }
}

export default withRouter(withStyles(dashboardStyle)(UserForm));

DataProvider.js

import React, {Component} from "react";
import {withRouter} from 'react-router-dom';
import PropTypes from "prop-types";

class DataProvider extends Component {
  static propTypes = {
    endpoint: PropTypes.string.isRequired,
    render: PropTypes.func.isRequired
  };

  state = {
    data: [],
    loaded: false,
    placeholder: "Loading...",
  };

  componentDidMount() {
    fetch(
      this.props.endpoint,
      {
        headers: {
          Authorization: `Token ${localStorage.getItem('token')}`
        }
      }
    )
      .then(response => {
        if (response.status === 401) {
          localStorage.removeItem('token');
          this.props.history.push("/accounts/login");
          return;
        }
        else if (response.status !== 200) {
          return this.setState({placeholder: "Something went wrong"});
        }
        return response.json();
      })
      .then(data => data && this.setState({data: data, loaded: true}));
  }

  render() {
    const {data, loaded, placeholder} = this.state;
    return loaded ? (data ? this.props.render(data) : <p>{placeholder}</p>) : <p>{placeholder}</p>;
  }
}

export default withRouter(DataProvider);

[einazare]

Hello again @simkimsia ,

After looking at the warning, i've seen that the error comes from the Header / Navbar component.
We are creating the Navbar / Header brand based on our routes.
And from what i can see, you have no brand.
See the attached image.

Not sure what is best for you.
You will find our brand function inside src/components/Header/Header.jsx, between lines 23 and 40, and you will see the function being called at line 80.

Hope this information helps you.

Best,
Manu

[simkimsia]

Understood. This works now. Thank you.

[einazare]

Hello there, @joleschmidt ,

I honestly do not know how to help you, since our product is ReactJS based and not React native.

Best,
Manu

[Eljili]

react_devtools_backend.js:2557 Warning: Failed prop type: The prop data is marked as required in ChartComponent, but its value is undefined.
in ChartComponent (created by Bar)
in Bar (created by Dashboard)
in div (created by Dashboard)
in div (created by CardBody)
in CardBody (created by Dashboard)
in div (created by Card)
in Card (created by Dashboard)
in div (created by Col)
in Col (created by Dashboard)
in div (created by Row)
in Row (created by Dashboard)
in div (created by Dashboard)
in Dashboard (created by Route)
in Route (created by Full)
in Switch (created by Full)
in div (created by Container)
in Container (created by Full)
in main (created by Full)
in div (created by Full)
in div (created by Full)
in Full (created by Route)
in Route
in Switch
in Router (created by HashRouter)
in HashRouter

my code :

handleLogin(e) {
e.preventDefault();
if (this.handleValidation()) {
fetch(
configuration.baseURL + 'administrator/authentication-administrator',
{
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state.fields),
}
)
.then((response) => {
return response.json();
})
.then((data) => {
if (data.payload == 'Invalid') {
return toast.error('Invalid email or password.');
} else {
console.log(data);
reactLocalStorage.set('token', '');
var token = this.generateToken(data.payload);
this.setState({ isAuthenticated: true });
reactLocalStorage.set('token', token);
reactLocalStorage.set('user_id', data.payload[0].admin_id);
this.props.history.push('/dashboard');
}
});
}
}

[Eljili]

@einazare

[einazare]

Hello there, @Eljili ,

Please make a video with the following and send it to me, at manu@creative-tim.com:

• Download the product
• Unzip the product
• Open terminal and cd into the project
• Run node -v
• Run npm -v
• Run npm install
• Run npm start
• Showcase the issue

Best,
Manu

[LaxmanPache123]

hello,
I added proptype for object like

but still getting error

[MathiMSK]

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

and this error is from MDTypography

import { forwardRef } from "react";

// prop-types is a library for typechecking of props
import PropTypes from "prop-types";

// Custom styles for MDTypography
import MDTypographyRoot from "components/MDTypography/MDTypographyRoot";

// Material Dashboard 2 React contexts
import { useMaterialUIController } from "context";

const MDTypography = forwardRef(
(
{ color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest },
ref
) => {
const [controller] = useMaterialUIController();
const { darkMode } = controller;

return (
  <MDTypographyRoot
    {...rest}
    ref={ref}
    ownerState={{
      color,
      textTransform,
      verticalAlign,
      fontWeight,
      opacity,
      textGradient,
      darkMode,
    }}
  >
    {children}
  </MDTypographyRoot>
);

}
);

// Setting default values for the props of MDTypography
MDTypography.defaultProps = {
color: "dark",
fontWeight: false,
textTransform: "none",
verticalAlign: "unset",
textGradient: false,
opacity: 1,
};

// Typechecking props for the MDTypography
MDTypography.propTypes = {
color: PropTypes.oneOf([
"inherit",
"primary",
"secondary",
"info",
"success",
"warning",
"error",
"light",
"dark",
"text",
"white",
]),
fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]),
textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]),
verticalAlign: PropTypes.oneOf([
"unset",
"baseline",
"sub",
"super",
"text-top",
"text-bottom",
"middle",
"top",
"bottom",
]),
textGradient: PropTypes.bool,
children: PropTypes.node.isRequired,
opacity: PropTypes.number,
};

export default MDTypography;