SOLID React article, code snippet 7: Children prop in React

solid_react-007-ChildrenExample.tsx

interface AProps extends React.PropsWithChildren {}

interface BProps {
  childNodes?: React.ReactNode | undefined;
}

export const A = ({ children }: AProps) => {
  return <section>{children}</section>;
};

export const B = ({ childNodes }: BProps) => {
  return <section>{childNodes}</section>;
};

export const Sections = () => {
  return (
    <>
      {/** When you write this: */}
      <A>Children as a nested text node</A>
      {/** What actually happens behind the scenes is this: */}
      <A children="Children as a prop instead" />
      {/** And if you want you can even rename the prop: */}
      <B childNodes="Let's rename the prop" />
    </>
  );
};