adding component to element made through createElement in React.js
Avoid direct DOM manipulation as Chris stated. Regarding your case, It's better to use .map() on the items list. I wrote a quick sample based on your API request that you can start working with. See below:
import React, {useState, useEffect} from "react";
import "./style.css";
export default function App() {
const [data, setData] = useState([])
useEffect(() => {
fetch(
"https://api.nasa.gov/planetary/apod?count=20&api_key=lwtGe8ifpAENLITuYZ0b1gqxkdhZux9u2OdvlfB4",
{
method: "GET",
headers: {
"content-type": "application/json",
},
}
)
.then((response) => response.json())
.then((data) => setData(data));
}, [])
return (
<div>
{data.map((item, index) => (
<div className="imgcards__title">
{
<li>{item.title} {item.date}</li>
}
</div>
))
}
</div>
);
}
You can also add the like button that you mentioned with the other html elements inside the .map() scope and apply whatever logic you wish to add using onClick() or other functionalities. I recommend reading the React documentation on how to use the map function with list to display data, here. Edit: don't forget add a key to each child as well as each element inside children.