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);
}
};
const filtered = list.filter((item) => {
item.title;
});
console.log(list);
return (
!list?.length ?
list.map((item) => {
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"