DEV Community

Gcobani Mkontwana
Gcobani Mkontwana

Posted on

1 1

I have rest api to fetch and want to register it to my App.js, How can i achieve such in react?

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')} />

)
Enter fullscreen mode Exit fullscreen mode

// 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.
Enter fullscreen mode Exit fullscreen mode

}

}

export default App;`

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs