Create a single-page application using React Hooks that fetches the data from the following endpoint:
https://jsonplaceholder.typicode.com/posts
This endpoint returns a list of blog posts in JSON format. You need to display these blog posts in a visually appealing way on the page.
Requirements
- Create a React app in your local.
- Use React Hooks for all state management and component logic.
- Fetch the data from the above endpoint when the component is first rendered.
- Display the title, body, and author of each blog post.
import "./styles.css";
import{ useState, useEffect} from "react";
export default function App() {
const [list, setList] = useState([])
const url = "https://jsonplaceholder.typicode.com/posts"
useEffect( () => { getData() },[])
const getData = async() => {
try {
const resp = await fetch(url);
const dataR = await resp.json()
setList(dataR);
} catch (error) {
console.log("error", error)
}
}
console.log(list)
return (
return (
)
})}
);
}
// userId: 1
// id: 1
// title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
// body: "quia et suscipit
// suscipit recusandae consequuntur expedita et cum
// reprehenderit molestiae ut ut quas totam
// nostrum rerum est autem sunt rem eveniet architecto"