Aythami López Déniz
PreguntaHola buenas noches, continuo teniendo este error al crear un nuevo item. ¿Pueden decirme a que se debe? Gracias.
Error: Target container is not a DOM element.
createPortal$1 [as createPortal]
node_modules/react-dom/cjs/react-dom.development.js:26195
Modal
src/Modal/index.js:6
3 | import ‘./Modal.css’;
4 |
5 | function Modal({ children }) {
6 | return ReactDOM.createPortal(
7 | <div className=“ModalBackground”>{children}</div>,
8 | document.getElementById(‘modal’)
9 | );
Mi index.html es este:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<link rel=“icon"href=”%PUBLIC_URL%/favicon.ico" />
<meta name=“viewport"content=“width=device-width, initial-scale=1” />
<meta name=“theme-color"content=”#000000” />
<link href=“https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"rel="stylesheet” />
<meta
name=“description"
content=“Web site created using create-react-app”
/>
<link rel=“apple-touch-icon"href=”%PUBLIC_URL%/logo192.png” />
<link rel=“manifest"href=”%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=“root”></div>
<div id=“modal”></div>
</body>
</html>
Llevo una semana y no he conseguido dar con el error. Muchas gracias por su ayuda.
Aythami López Déniz
gracias
Aythami López Déniz
Manuel Andrés Buriticá Yepes
Amigo, revisando tu código encuentro que realizaste mal la importación del ReactDOM, debes hacerlo sin las llaves así:
import ReactDOM from'react-dom';
Recuerda también que siempre importes a React:
import React from'react';
Además, estás utilizando erróneamente la props children. En los parámetros de la función se hace algo llamado destructuring para utilizar solo esa props.
Te comparto una clase del curso de ECMAScript 6+ donde hablan sobre este tema y puedas profundizarlo.
Así debería quedar el código para que funcione correctamente:
import React from'react'; import ReactDOM from'react-dom'; function Modal({ children }) { return ReactDOM.createPortal( <div> {children} </div>, document.getElementById('modal') ); } export { Modal };
Javier Salcedo Salgado
Hola si importaste ReactDOM, react y exportaste la función Modal, si lo hiciste y aun no funciona por favor sube tu proyecto a gitHub y compártelo para poder revisarlo detalladamente y poder ayudarte.
