Vite + React

1f:I[29230,["/_next/static/immutable/chunks/29ffsym6-_27j.js","/_next/static/immutable/chunks/13v3dhjtb3v_e.js","/_next/static/immutable/chunks/3csefkme7d__i.js","/_next/static/immutable/chunks/0flnpbhpq1rpz.js","/_next/static/immutable/chunks/37vn0nbeyx7gb.js","/_next/static/immutable/chunks/058tqda8gzk6b.js","/_next/static/immutable/chunks/3dum0keh27y4r.js","/_next/static/immutable/chunks/24pfcid4g29td.js","/_next/static/immutable/chunks/1pczk1uw113tk.js","/_next/static/immutable/chunks/3jics2r4fwp8o.js"],"default"] 20:Ta6a,import { describe, it, expect } from "vitest"; //@ts-expect-error import Card from "./src/components/card"; //@ts-expect-error import SplitPane from "./src/components/split-pane"; import { render } from "@testing-library/react"; describe("Tests for Composition challenge", () => { describe("Tests for Card", () => { it("Renders its children in the body", () => { const { container } = render( //@ts-expect-error

Hello

); expect(container.querySelector("div.card")).toBeTruthy(); expect(container.querySelector("div.card-body #content")?.textContent).toBe( "Hello" ); }); it("Renders no header or footer when they are not passed", () => { //@ts-expect-error const { container } = render(Hello); expect(container.querySelector("div.card-header")).toBeFalsy(); expect(container.querySelector("div.card-footer")).toBeFalsy(); }); it("Renders a text title and footer", () => { const { container } = render( //@ts-expect-error Hello ); expect(container.querySelector("div.card-header")?.textContent).toBe("Ada"); expect(container.querySelector("div.card-footer")?.textContent).toBe("1815"); }); it("Accepts JSX for the title and the footer", () => { const { container } = render( //@ts-expect-error Ada} footer={}> Hello ); expect(container.querySelector(".card-header #heading")?.textContent).toBe("Ada"); expect(container.querySelector(".card-footer #save")?.textContent).toBe("Save"); }); it("Renders several children", () => { const { container } = render( //@ts-expect-error

One

Two

); expect(container.querySelectorAll("div.card-body p")).toHaveLength(2); }); }); describe("Tests for SplitPane", () => { it("Renders each pane in its own slot", () => { const { container } = render( //@ts-expect-error Nav

} right={

Article

} /> ); expect(container.querySelector("div#split")).toBeTruthy(); expect(container.querySelector("#left #nav")?.textContent).toBe("Nav"); expect(container.querySelector("#right #article")?.textContent).toBe("Article"); expect(container.querySelector("#left #article")).toBeFalsy(); }); }); }); 21:Tb05,Sooner or later a component grows a prop like `showHeader`, then `headerTitle`, then `headerIcon`, then `headerAlign`. Every new use case adds another option, and the component becomes a configuration format nobody enjoys. React's answer is **composition**: instead of describing what a component should render with props, hand it the JSX. # The `children` prop Anything you put between a component's tags arrives as the `children` prop: ```jsx function Card({ children }) { return

{children}

; }

Ada Lovelace

The first programmer

; ``` `Card` knows nothing about what is inside it - it only provides the box. That is what makes it reusable: any content, no new props. # JSX as a prop `children` is one slot. When you need several, pass JSX through named props: ```jsx function Layout({ sidebar, content }) { return (

{content}

); } } content={

} />; ``` There is nothing special about this - JSX is just a value, so it can be passed like a string or a number. # Composition over configuration Compare the two designs: ```jsx // ❌ every variation needs a new prop

Ada Lovelace

FrameGround

FrameGround