Props11 / 12
Up next

Render prop

import { ReactNode } from "react";

interface ListProps {
  items: string[];
  render: (item: string) => ReactNode;
}

// the caller controls how each item renders
function List({ items, render }: ListProps) {
  return <ul>{items.map(render)}</ul>;
}

export default List;
What you're solving

a prop that is a function returning JSX