检查`Drawer`的渲染方法。 元素类型无效错误

Question

I'm using react js and antd.design library in my project . i'm trying to use a DRAWER component but i got an error : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Drawer .

the problem is with the Drawer Component , when i remove it the project runs perfeclty , when i add it the error appear again

this is my code :

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import "antd/dist/antd.css";
import React from "react";
import "antd/dist/antd.css";
import { Drawer, Button } from "antd";
import Stepper from "../addExperience/stepper";
import { Icon } from "antd";
import ElementClass from "./DrawerElement"
const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);
 class MyClass extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = () => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div>
        <a style={{ color: "#A6A6A6" }} onClick={this.showDrawer}>
          {" "}
          <IconText type="edit" text="Modifier" />{" "}
        </a>
          <Drawer
          title="Modifier cette experience"
          width={720}
          placement="right"
          onClose={this.onClose}
          maskClosable={false}
          visible={this.state.visible}
          style={{
            height: "calc(100% - 55px)",
            overflow: "auto",
            paddingBottom: 53
          }}
        >
          <Stepper />
          <div
            style={{
              position: "absolute",
              bottom: 0,
              width: "100%",
              borderTop: "1px solid #e8e8e8",
              padding: "10px 16px",
              textAlign: "right",
              left: 0,
              background: "#fff",
              borderRadius: "0 0 4px 4px"
            }}
          >
            <Button
              style={{
                marginRight: 8
              }}
              onClick={this.onClose}
            >
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Mettre à jour
            </Button>
          </div>
        </Drawer>  
      </div>
    );
  }
}

MyClass.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles()(MyClass);

Answer 1

I think your issue is that you are wrapping some of the arguments in {} , which makes the supplied value an object, rather than the expected datatype.

Check the API documentation , which for example says that width wants a datatype which is string|number meaning a string or a number. You have specified {720} which is an object. Make sure all your arguments use the correct data types.