React Design Patterns~Layout Componets / Lists~

• Lists

This pattern is useful for displaying list items flexibly.

・magazines.js

export const magazines = [
  {
    name: "VOGUE",
    pages: 256,
    price: 12.33,
  },
  {
    name: "ID-MAGAZINE",
    pages: 224,
    price: 13.33,
  },
  {
    name: "ELLE",
    pages: 233,
    price: 11.33,
  },
];

This object is the magazine items to be displayed on the screen.

・LargeListItems.jsx

import React from "react";

export const LargeMagazineListItems = ({ magazine }) => {
  const { name, price, pages } = magazine;
  return (
    <>
      <h2>{name}</h2>
      <p>{price}</p>
      <p># of pages: {pages}</p>
    </>
  );
};

This component displays name, price and pages receiving magazine items as props, which is called magazine.

・SmallListItems.jsx

import React from "react";

export const SmallMagazineListItems = ({ magazine }) => {
  const { name, price } = magazine;
  return (
    <h2>
      {name} / {price}
    </h2>
  );
};

This component displays name and price receiving magazine items as props, which is called magazine.

・regular.jsx

import React from "react";

export const RegularList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <ItemComponent key={i} {...{ [sourceName]: item }} />
      ))}
    </>
  );
};

・This component displays list items flexibly, taking items, sourceName, and ItemComponent as props.

・numbered.jsx

import React from "react";

export const NumberedList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <>
          <h3>{i + 1}</h3>
          <ItemComponent key={i} {...{ [sourceName]: item }} />
        </>
      ))}
    </>
  );
};

・This component displays number and list items flexibly, taking items, sourceName, and ItemComponent as props.

import React from "react";

export const RegularList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <ItemComponent key={i} {...{ [sourceName]: item }} />
      ))}
    </>
  );
};

・This component displays list items flexibly, taking items, sourceName, and ItemComponent as props..jsx

import React from "react";

export const RegularList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, i) => (
        <ItemComponent key={i} {...{ [sourceName]: item }} />
      ))}
    </>
  );
};

・This component displays list items flexibly, taking items, sourceName, and ItemComponent as props.

・App.js

import { NumberedList } from "./components/lists/numbered";
import { RegularList } from "./components/lists/regular";
import { LargeMagazineListItems } from "./components/magazines/LargeListItems";
import { SmallMagazineListItems } from "./components/magazines/SmallListItems";
import { magazines } from "./data/magazines";

function App() {
  return (
    <>
      <RegularList
        items={magazines}
        sourceName={"magazine"}
        ItemComponent={SmallMagazineListItems}
      />
      <NumberedList
        items={magazines}
        sourceName={"magazine"}
        ItemComponent={LargeMagazineListItems}
      />
    </>
  );
}

export default App;

・This component is composed of the RegularList and NumberedList components, passing items, sourceName, and ItemComponent as props so that I can display list items flexibly.