Clash Royale CLAN TAG#URR8PPP

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

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.

return <span>renderedComponent</span>;

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);


trigger

children

2 Answers
2

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

Modal

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

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.

package.json

yarn install react

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.