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

306
Views
Trying to convert HTML code that I get from server to Image , but gives me an error, in ReactJS

This is basically an app that automates making posts on social media. I have a social media post template for the vertical "Cablgram" stored in the backend, and the request serves me back the HTML code for that template. When I try to convert that image to an image (using the domtoimage library) so that I can display it, I get this error: dom-to-image.js:191 Uncaught (in promise) TypeError: node.cloneNode is not a function.

import './Dashboard.css';
import { useEffect, useState } from 'react'
import { Grid, Image } from 'semantic-ui-react'
import axios from 'axios'
import domtoimage from 'dom-to-image'
import parse from 'html-react-parser'

function Dashboard(props) {
    let [posts, setPosts] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

    function retain(unsafe) {
        return unsafe
            .replaceAll("&lt;", ' <')
            .replaceAll("&gt;", ' > ')
    }

    async function getPosts() {
        let { data } = await axios.post('http://localhost:3000/templates/get', { vertical_name: 'cablgram' })
        let articles = data.articles

        let article_htmls = articles.map(async (code) => {
            const html = retain(code)
            const actual_html = parse(html)
            const url = await domtoimage.toPng(wrapper)
            return url
        })

        setPosts(article_htmls)
    }

    useEffect(() => {
        getPosts()
    }, [])

    return (
        <div className="Dashboard page-container">
            <div className="title-container">
                <h1 className="title">Atlas</h1>
            </div>

            <div className="subtitle-container">
                <span className="subtitle">Curated news from contemporary culture.</span>
            </div>

            <div className="dashboard-grid-container">
            <Grid columns={3}>
                { 
                    posts.map((post, index) => (
                        <Grid.Column key={index}>
                            {post}
                        </Grid.Column>
                    ))
                }
            </Grid>
            </div>
        </div>
    )
  }
  
  export default Dashboard
  
  

Could someone explain to me what's wrong, and how I can fix this?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Try this out:

// Syntax:
let newClone = node.cloneNode([deep])

// Example:
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)

about 4 years ago · Juan Pablo Isaza Report
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!