import React, { useState, useEffect } from 'react';
import axios from 'axios';
function Posts() {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('/api/posts')
.then(response => {
setPosts(response.data);
})
.catch(error => {
console.error('There was an error fetching the posts!', error);
});
}, []);
return (
<div>
<h1>Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default Posts;
Create a form in React to submit new posts: