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("<", ' <')
.replaceAll(">", ' > ')
}
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?
Try this out:
// Syntax:
let newClone = node.cloneNode([deep])
// Example:
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)