I have this logic when im trying to fetch rest api and want to display details from my App.js(Main-App) and have Post.js(fetch rest api data).

// Post.js
import React, { useState, useEffect } from 'react'
export default function Posts() {
const [post, getPosts] = useState([])
const API = 'https://fe-assignment.vaimo.net/';
const fetchPost = () => {
fetch(API)
.then((res) => res.json())
.then((res) => {
console.log(res)
getPosts(res)
})
}
useEffect(() => {
fetchPost()
}, [])
return (
<>
<h2>React Fetch Data with REST API Example</h2>
<ul>
{post.map((item, i) => {
return <li key={i}>{item.name}</li>
})}
</ul>
</>
)
}

`// App.js
import React from "react";
import './App.css';
import './index.css';
import Posts from "./components/Posts";
class App extends React.Component {

// First load an image for Drone.
render() {
return (

    <img alt="timer" src={require('./components/images/drone_image.png')} />

)

// Need some logic here to pass one value from Rest api js here when this page is loaded currently its only showing image
function App() {

2021 hot selling GPS 5G quadcopter drone with camera remote control aircraft drone WiFi mini drone camera

// position the shopping details at the right side bar.

}

}

export default App;`