0

When I inject the modal component into the dom it renders fine. However, if I wrap that component and then render the new component into the dom. Nothing renders other than root.

Working component:

ReactDOM.render(( 
  <Modal visible={true}>
    <div> hello world </div>
  </Modal>
    ), document.getElementById('root'));

Wrapped component that wont render:

ReactDOM.render((
    <DeleteEntityModal />
), document.getElementById('root'));

This contains:

const DeleteEntityModal = () => {
  
  return (
    <Modal
      visible={true}
    >
      <div>
        hello world
      </div>
    </Modal>
  );
};
  
export default DeleteEntityModal;
Joe Ellul-Turner
  • 21
  • 4

1 Answers1

0

Since you are exporting DeleteEntityModal using default keyword, you need to import it like:

import DeleteEntityModal from "./Components/..."

Or just remove the default keyword from your exportation.

Paul-Marie
  • 874
  • 1
  • 6
  • 24
  • I've just tried both suggestions and it's still not working unfortunately. – Joe Ellul-Turner Nov 08 '22 at 13:15
  • Are you familliar with React's hook ? can you add a simple useEffect in `DeleteEntityModal` with a mere `console.log("toto")` in order to check in the console if the component is called ? – Paul-Marie Nov 08 '22 at 13:19
  • 1
    Just tried. The components not being called at all. So must be a importing issue of some sort. – Joe Ellul-Turner Nov 08 '22 at 13:28
  • Did you tried to keep importing it like `import { DeleteEntityModal } from './Components/...';` with the `export default DeleteEntityModal;` ? – Paul-Marie Nov 08 '22 at 13:32