Skip to content

Instantly share code, notes, and snippets.

@laxmariappan
Last active May 23, 2022
Embed
What would you like to do?
data fetching example - Remix
// import loader hook
import { useLoaderData, Link } from "@remix-run/react";
export let loader = async () => {
const result = await fetch("https://wordpress.org/news/wp-json/wp/v2/posts");
const posts = await result.json();
return posts;
};
export default function PostsIndex() {
let data = useLoaderData(); // access the data here
return (
<>
<section>
<div className="relative items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div className="grid w-full grid-cols-1 gap-12 mx-auto lg:grid-cols-3">
{data.map(function (item, index) {
return (
<div key={index} className="p-6 bg-indigo-500">
<div className=" mb-5 text-white ">
<h3 className="text-xl mb-3 font-bold">
<Link to={item.slug}>{item.title.rendered}</Link>
</h3>
<div
className="mb-3"
dangerouslySetInnerHTML={{
__html: data[0].excerpt.rendered,
}}
/>
<br />
<Link
to={item.slug}
className="bg-gray-900 text-white p-4 my-5"
>
Read more
</Link>
</div>
</div>
);
})}
</div>
</div>
</section>
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment