SOLID React article, code snippet 8: Children narrow prop in React

solid_react-008-ChildrenNarrowExample.tsx

interface ANarrowProps {
  children: string;
}

interface BNarrowProps {
  childNodes: string;
}

export const ANarrow = ({ children }: ANarrowProps) => {
  return <section>{children}</section>;
};

export const BNarrow = ({ childNodes }: BNarrowProps) => {
  return <section>{childNodes}</section>;
};

export const Sections = () => {
  return (
    <>
      <ANarrow>Children as a nested text node</ANarrow>
      <ANarrow children="Children as prop instead" />
      <BNarrow childNodes="Let's rename the prop" />
    </>
  );
};