Whenever a new PostCard is posted, I prefer to have the latest post displayed at the top of the list rather than at the bottom.
If you are currently appending to the end of an array, consider prepending to it instead. For instance, if you are doing this:
setPosts(prev => [...prev, { title: 'My New Post' }]);
Try this approach instead:
setPosts(prev => [{ title : 'My New Post' }, ...prev]);
If you are unable to modify how the array is initially constructed due to component requirements, you can create a new array with the desired order and then iterate over it. You may want to use memoization if the array remains relatively static:
const reorderedPosts = useMemo(() => {
return [...posts].reverse();
}, [posts]);
// ...
{reorderedPosts.map((post, index) => (
<PostCard post={post.node} key={post.title} />
))}
This can also be expanded to allow for changing the order dynamically using state, if needed:
const [shouldReverse, setShouldReverse] = useState(false);
const reorderedPosts = useMemo(() => {
if (shouldReverse) {
return [...posts].reverse();
} else {
return posts;
}
}, [posts, shouldReverse])
// ...
{reorderedPosts.map((post, index) => (
<PostCard post={post.node} key={post.title} />
))}