Skip to content

Invariant Violation: Modal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. #1051

@Sauravroy1987

Description

@Sauravroy1987

Summary:

Error occurred while returning Modal tag in React.

Steps to reproduce:

  1. OptionModal.js
    import React, { useEffect } from "react";
    import Modal from "react-modal";

const OptionModal = (props) => {
return (
<div
style={{
textAlign: "center",
display: "block",
padding: 30,
margin: "auto",
}}
>
{/* <h1 style={{ color: "green" }}>GeeksforGeeks

Modal Component in ReactJS?

*/}

GFG




);
};

export default OptionModal;

  1. Call OptionModal from parent component
  2. Dependencies:
    "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "live-server": "^1.2.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-modal": "^3.16.1",
    "sass-loader": "10.1.1",
    "style-loader": "0.18.2",
    "validator": "13.12.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
    }

Exception:
react-dom.js:17859 Uncaught Invariant Violation: Modal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
at invariant (https://unpkg.com/react-dom@15/dist/react-dom.js:17859:15)
at ReactCompositeComponentWrapper._renderValidatedComponent (https://unpkg.com/react-dom@15/dist/react-dom.js:5234:136)
at ReactCompositeComponentWrapper.performInitialMount (https://unpkg.com/react-dom@15/dist/react-dom.js:4765:30)
at ReactCompositeComponentWrapper.mountComponent (https://unpkg.com/react-dom@15/dist/react-dom.js:4661:21)
at Object.mountComponent (https://unpkg.com/react-dom@15/dist/react-dom.js:11409:35)

Could you please help here. Thanks in advance.

Expected behavior:

Link to example of issue:

Additional notes:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions