Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

300
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!