React 18

Passing Children

• Use children props to pass children/html content or big text to the component
• children is a special prop that component supports

Alert.tsx

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

function Alert({ children }: Props) {
  return (
    <div className="alert alert-primary" role="alert">
      {children}
    </div>
  );
}

export default Alert;

App.tsx

<div>
   <Alert>Hello World Children</Alert>
 </div>

Extension

ES7+ - For code snippets