ReactJS Design Pattern ~Render Props Pattern~

・Render props pattern allows you to pass rendering logic as a prop to a component. This pattern is similar to function children but uses a named prop instead of the children prop, making it explicit what kind of rendering function is expected.

function List({ items, renderItem }) {
  return <ul>{items.map((item) => renderItem(item))}</ul>;
}

function App() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <div>
      <h1>Render Props Pattern</h1>

      <h2>List</h2>

      <List
        items={items}
        renderItem={(item) => {
          return <li key={item}>{item}</li>;
        }}
      />
    </div>
  );
}

export default App;