Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

301
Vistas
Using React Functional Component with imported hooks in embeded html

I am working with a standalone React component that I want to display in a separate HTML file as a widget. I referenced the proper react libraries + babel but I can't get it to work because my functional component is using imports. I set the embedded script as a module but in that case, the exported function can be retrieved outside of the script. Can you point me out what I am doing wrong?

This is my HTML file:

<link href="/Content/css/rep/Portals.css" rel="stylesheet"/>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel" data-type="module">

import {useEffect, useState} from 'react';

export const Portal = ({ tags, owner }) =>  {
    const [data, setData] = React.useState([]);
    const imgUrl = 'myendpoint-url';

    useEffect(() => {
        fethData(owner, tags).then(data => setData(data));
    }, []);

    const fethData = async (owner, tags) => {
        //...do something asyncronously but response an array for now
        response [];
    };  

    return (
        <div>
            {data && data.map((item) => {
                return (                    
                    <div key={item.id}>
                        ... some intereesting markup                                          
                    </div>                    
                )
            })}
        </div>
    );
};
</script>

Then, later in the file, I have another script that renders the first component.

<div id="root-app"></div>

<script type="text/babel">
const domContainer = document.getElementById('root-app');
ReactDOM.render(<Portal tags={['tag-1', 'tag-2']}  owner={'me'} />, domContainer);
</script>

The previous code resulted in the error : enter image description here

I remove all unnecessary code in my example only left the important things. I know... this is not the best way to implement react components but believe me, I am putting in a CMS that is absolutely inflexible, and there is no way to put in a different form.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda