Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

307
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda