- 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.
SOCIAL SHARE CARD GENERATOR