React import modal not working (from semantic-ui-react)

Question

I'm trying to use semantic UI for React with its modal.

Dropdown is ok but modal can't load :

import {DropDown} from "semantic-ui-react";
import {Modal} from "semantic-ui-react";

export default class Builder extends Component {  
  render(){
  return(

   <DropDown/>
   <Modal/>
)
}
}

The console is returning this error :

app.js:547 Warning: React.createElement: type is invalid -- expected a string 
(for built-in components) or a class/function (for composite components) but got: undefined
You likely forgot to export your component from the file it's defined in. 
Check the render method of `Portal`.

I have already tried like this :

import Modal from "semantic-ui-react";

And as I saw, Modal folder is at the same level as the Dropdown in my packages. Any help would be welcome!

Thanks

Answer 1

I think the solution to your problem is either of the following:

1. You forgot to import import React, { Component } from "react";

2. The structure of your code. You must wrap both JSX elements in an enclosing tag as they are adjacent. It should be like this:

   <div> <Dropdown/> <Modal/> </div>

3. You don't have to separate import two components as they are both in semantic-ui-react library.

Hope this helps