Passing Children (The `children` prop)

Requirement

Understand how to create wrapper components (like a Card or Layout component) that wrap around other elements using the special children prop.

Assignments (Start First)

1. Simple beginner UI task: Create a CardWrapper component that accepts a children prop and renders it inside a <div> with a border and padding.
2. Slightly improved version: Add an optional title prop to CardWrapper. If provided, render an <h3> at the top of the card before the children.
3. Practical real-world component: Build a ModalOverlay component that dims the background and centers whatever content is passed inside it as children.
4. "The Escalation": Create a SplitLayout component that takes two specific props: leftContent and rightContent (which can both accept JSX). Render them side-by-side using Flexbox.

Lessons (Optional)

• The children prop: A special prop automatically passed to components that have opening and closing tags.
• Wrappers: Useful for defining consistent layout patterns or styling containers without repeating CSS.

The Summary and Quizzes

1. Concept explanation: The children prop lets you nest components inside each other just like standard HTML tags.
2. Why it works in React: React treats anything between a component's opening and closing tags as a special children property inside the props object.
3. Challenge question: How do you access the content nested inside <MyWrapper>Hello World</MyWrapper> within the MyWrapper component definition?