DEV Community

Cover image for React Design Patterns~Layout Componets / Lists~
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

React Design Patterns~Layout Componets / Lists~

#frontend #react #javascript #webdev
  • 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, }, ];
Enter fullscreen mode Exit fullscreen mode

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> </> ); };
Enter fullscreen mode Exit fullscreen mode

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> ); };
Enter fullscreen mode Exit fullscreen mode

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 }} /> ))} </> ); };
Enter fullscreen mode Exit fullscreen mode

・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 }} /> </> ))} </> ); };
Enter fullscreen mode Exit fullscreen mode

・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 }} /> ))} </> ); };
Enter fullscreen mode Exit fullscreen mode

・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 }} /> ))} </> ); };
Enter fullscreen mode Exit fullscreen mode

・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;
Enter fullscreen mode Exit fullscreen mode

・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.

Image description

Top comments (0)