CODEWITHSUNDEEP
reactjs
Jin
Jin

Reputation: 1439

Failed prop type: Invalid prop `element` of type `function` supplied to `Group`, expected `object`

I imported component from src/components folder of Search, Dropdown and Group

The Group component contains search and dropdown component and from that I created a Product page to show them.

This is my code for that src/pages/product.

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Header from "../../components/Header/index"
import Group from "../../components/Group/index"
import Dropdown from "../../components/Dropdown/index"
import Search from "../../components/Search/index"
import ProductItem from "../../components/ProductItem/index"
import "../Product/index.css";

const Product = () => {
  return (
    <Container>
      <Header />
      <Row>
        <Group
          title="Product group"
          element={<Dropdown items={["Milk Tea", "Juice"]} />}
        />
        <Group
          title="Sort by price"
          element={<Dropdown items={["Low to hight", "Hight to low"]} />}
        />
        <Group
          title="Search"
          element={Search}
        />
      </Row>
    </Container>
  );
}

export default Product;

And here is in src/component/Group

import React from "react";
import { Col, Row } from "react-bootstrap";
import PropTypes from "prop-types";
import "../Group/index.css";
import "../../common/index.css";

const Group = ({ title, element }) => {
  return (
    <Col bsPrefix="group">
      <h4 className="title group-title">{title}</h4>
      <Row className="group-element">{element}</Row>
    </Col>
  );
};

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.object,
};

Group.defaultProps = {
  title: "",
  element: [],
};

export default Group;

I don't understand why to have this warning, I don't know where I wrong

Failed prop type: Invalid prop `element` of type `function` supplied to `Group`, expected `object`.

Upvotes: 2

Views: 2176

Answers (2)

Bikram Jethi
Bikram Jethi

Reputation: 341

Since you are passing a react element as the element prop, you should accept it as PropTypes.func in your Group component. func covers types for functional as well as react components passed as props. Please try this, it should work.

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.func,
};

Group.defaultProps = {
  title: "",
  element: ()=>{},
};

Upvotes: 1

Shubham Verma
Shubham Verma

Reputation: 5054

You are expecting object. And passing defaultProps array. Either do:

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.object,
};

Group.defaultProps = {
  title: "",
  element: {},
};

or

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.array,
};

Group.defaultProps = {
  title: "",
  element: [],
};

Upvotes: 0

Related Questions