index.js import MeetupList from "./../components/meetups/MeetupList"; import { useEffect } from "react"; import { useState } from "react"; const data = [ { id: "m1", title: "A first meetup", image: “/location.jpg”, address: "Some address 10, 12345 Some city", description: "This is a first meetup!", }, { id: "m2", title: "A second meetup", image:“/location.jpg”, address: "Some address 20, 6789 Some city", description: "This is a second meetup!", }, ]; const HomePage = () => { const [loadedMeetups, setLoadedMeetups] = useState([]); useEffect(() => { // send http request and fetch data setLoadedMeetups(data); }, []); return ( <> <MeetupList meetups={loadedMeetups} /> </> ); }; export default HomePage;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter