Description
Summary:
Error occurred while returning Modal tag in React.
Steps to reproduce:
- 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;
- Call OptionModal from parent component
- 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.