Semantic UI React Modal : Portal.render(): A valid React element (or null) must be returned

Question

I am trying to implement semantic-ui-react modal in my react dashboard application, I've created a ModalManager component which would be used alongside Redux to manage the state of Modal_Open and Modal_Close.

The Redux part works great, however, during render I see issue only with "Semantic-UI-React-Modal component. Below is the error message

invariant.js?7313:42 Uncaught Error: Portal.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js?7313:42)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js?063f:830)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:361)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
    at Object.mountComponent (ReactReconciler.js?c56c:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js?063f:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js?063f:257)
    at Object.mountComponent (ReactReconciler.js?c56c:45)
    at Object.updateChildren (ReactChildReconciler.js?c86a:121)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js?e1f8:206)

Below is the code for Modal manager, it is able to render other components ( some test charts ) on return <span>{renderedComponent}</span>; I suspect the problem is when the rendered component is Semantic-Ui-React-Modal other components work just fine.

I am using React 16.4.1

Modal Manager Component

import React, { Component } from "react";
import { connect } from "react-redux";
import { Modal } from "semantic-ui-react";
import { closeModal } from "../../Redux/actions/modalActions";

export class ModalManager extends Component {
  render() {
    const { modalConfiguration } = this.props;

    const defaultProps = {
      defaultOpen: true,
      closeIcon: true,
      onClose: this.props.closeModal
    };

    let renderedComponent;

    if (modalConfiguration) {
      const { modalProps = {} } = modalConfiguration;
      renderedComponent = <Modal {...Object.assign({}, modalProps, defaultProps)} />;
    }

    return <span>{renderedComponent}</span>;
  }
}

function mapStateToProps(state) {
  return { modalConfiguration: state.modals };
}

export default connect(mapStateToProps, { closeModal })(ModalManager);

Home Page

class HomePage extends React.Component {

  state = {
    expanded : false,
    isLoading: false,
    error: null
  }

  componentDidMount() {
    this.setState({isLoading: true});

    axios.get(API)
    .then(result => this.setState({
      T_Bugs: result.data.map(x => Number(x.code_bugs)).reduce((a, b) => a + b, 0),     
      isLoading: false
    }))
    .catch(error => this.setState({
      error,
      isLoading: false
    }))

  }




  render() {



   if (this.state.expanded) {
     this.setState( () => {
        return {
          expanded : false
        };
     });
   }



    return (
        <div>
          <Main expanded={this.props.expandedState}>
          <h1>Welcome to Stemplot</h1>

           <Card.Group stackable={true} itemsPerRow={8}>
           <StatCard loading={this.state.isLoading} image={this.state.isLoading ? "/images/spinner.gif":"/images/Duplicate.svg"} description=" XXX" title="Duplicate Lines" value={nFormat(this.state.T_Duplicate_Lines)}/>
            </Card.Group>
           <br/>
 <ModalManager />

          </Main>



        </div>
    )
  }

}


const mapStateToProps = (state) => {
    return {
        expandedState: state.sidebarReducer.expanded
    };
}

export default connect(mapStateToProps) (HomePage);

Answer 1

You are not rendering any children inside the Modal nor you are passing the required props as per the docs

class App extends React.Component {
  state = { openModal: false }

  toggleModal = () => this.setState(state => ({ openModal: !state.openModal }));

  render() {
    const { openModal } = this.state;
    return (
      <div>
        <button onClick={this.toggleModal}>Toggle Modal</button>
        <Modal open={openModal} closeIcon onClose={this.toggleModal}>
          <Header icon='browser' content="I' m a header" />
          <Modal.Content>
            <h3>I'm a content</h3>
          </Modal.Content>
        </Modal>
      </div>
    );
  }
}

Running example

Answer 2

I was having this same issue when I upgraded Semantic UI React from 0.7x to 0.82. My issue ended up being that after the upgrade, I was still using React version 15.x on my project. When I updated to React 16.x, the modal issue went away. So check your package.json for what version of react you're using. If it's 15.x or lower, try updating it. If you're using yarn, then yarn install react should do the trick. Just be aware that this may open up other compatibility issues in your project you may need to solve.