search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.37k stars 808 forks source link

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

Open Sauravroy1987 opened 3 months ago

Sauravroy1987 commented 3 months ago

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 <OptionModal selectedOption={this.state.selectedOption} closeModal={this.closeModal} />
  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:

tarun1081998 commented 2 months ago

your code seems incomplete, can you please elaborate the issue