0

I'm trying to nest a modal component within the navbar component, but I come up with the following error:

Error: _processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal).

My code:

import React, { Component } from 'react';
import { Navbar, NavItem, Modal, Button } from 'react-materialize';


class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showLoginModal: false
    };
    this.toggleLoginModal = this.toggleLoginModal.bind(this);
  }

  toggleLoginModal() {
    this.setState({ showLoginModal: !this.state.showLoginModal });
  }


  render() {
    console.log(this.state.showLoginModal);
    return (
    <div>
      <Navbar brand='Voting App' right>
        <Modal
          header='Login'
          trigger={<Button>Login</Button>}
        >
          Login
        </Modal>
      </Navbar>
    </div>
    )
  }
}

export default Header;

Any ideas why this is the case? Been trying to figure out the best way to introduce modals in react using the materialize styling, but hitting a lot of brick walls. Any help very welcome!

doctopus
  • 5,349
  • 8
  • 53
  • 105

2 Answers2

0

Upgrade your yarn from 0.x to 1.x, or NPM accordingly and try it again. Based on this post it should work.

Ravindra Ranwala
  • 20,744
  • 6
  • 45
  • 63
0

If you encounter with this problem, upgrading Yarn does not solve anything. You need to delete & re-install some conflicting packages. Upgrading yarn may delete those files, but if you are using npm; upgrading npm does not delete files and does not provide solution.

To delete modules:

If you use npm: Command to remove all npm modules globally?

If you use yarn: https://github.com/yarnpkg/yarn/issues/1048

ibrahim demir
  • 421
  • 3
  • 16