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

315
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
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