0

React-modal worked great for us in React 14.

We upgraded to React 16 and are getting the following error.

invariant.js:38 Uncaught Error: Modal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

We use the exact sample code from GitHub and we have re-installed react-modal. Any ideas?

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ExampleModal from './components/example_modal.js';

ReactDOM.render(

  <ExampleModal />
  , document.querySelector('#publish-hook'));

example_modal.js:

import React from 'react';
import { Component} from 'react'
import ReactModal from "react-modal";

export default class ExampleModal extends Component {
  constructor () {
    super();
    this.state = {
      showModal: true
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>

{
        <ReactModal 
           isOpen={this.state.showModal}
           contentLabel="Minimal Modal Example"
        >
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
       }

      </div>
    );
  }
}

const props = {};

//ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))
Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
dt1000
  • 3,684
  • 6
  • 43
  • 65
  • 1
    Working fine here: https://codesandbox.io/s/lxv9o1nxzl (submit form, modal pops up). You may want to post your code (if possible). – Matt Carlotta Oct 16 '18 at 23:26
  • OK matt, thanks for your great example. Dropped your example in my code-base, same issue. Above, I have put the simple example from the github repo right at the entry point of my code base. Same error. I have no idea....any ideas? – dt1000 Oct 17 '18 at 04:46
  • Took your example code above and threw it in a sandbox (no issues): https://codesandbox.io/s/l9prj4p47 (I did change the `document.querySelector` to `#root` and added `ReactModal.setAppElement("#root")` in the `ExampleModal.js` file). Without your actual code, I won't be able to narrow down what's causing the problem! – Matt Carlotta Oct 17 '18 at 04:58
  • 1
    If you can, create a stripped down repo on github with the reoccuring issue. Then I'll be able to poke around. Worst case scenario, you'll have to make your own reusable modal component (not that hard). – Matt Carlotta Oct 17 '18 at 05:06
  • Your code is working fine as @mattcarlotta mentioned. it would be great if you can post your full component code. – Amr Aly Oct 17 '18 at 05:35
  • Thanks for all the input folks. We have a large project, not sure how to strip it and create a new repo. I will try. In the meantime, is there a way to see the package.json that is used for the fiddle you use ( in codesandbox)? We are thinking there is a dependency issue. Maybe I start by using that package.json and then adding the other packages that we need. – dt1000 Oct 18 '18 at 18:51

1 Answers1

0

Running into a similar issue with react-datepicker, i ended up in this question.

As stated by Matt Carlotta, this is not reproducible. Tried with a bare minimum react 16 project from scratch, without react-app (just the bare minimum dependencies) and react-modal version 3.6.1 (I believe it was the latest version at the time this question was asked).

Would suggest to either provide the react modal version when this issue occured (if different than 3.6.1 to verify), or close this question.

Andreas
  • 416
  • 1
  • 4
  • 8