Container/Presentation Pattern

[weikee94]

container

import React from 'react';
import { Listings } from '../presentational/Listings';

export default function ListingsContainerComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('https://house-lydiahallie.vercel.app/api/listings')
      .then((res) => res.json())
      .then((res) => setData(res));
  }, []);

  if (!data) return null;

  return <Listings listings={data.listings} />;
}

presentational

import React from 'react';
import { Listing } from './Listing';
import { ListingsGrid } from './ListingsGrid';

export function Listings(props) {
  return (
    <ListingsGrid>
      {props.listings.map((listing) => (
        <Listing key={listing.id} listing={listing} />
      ))}
    </ListingsGrid>
  );
}

stackblitz