Опорная идея
Если проп может отсутствовать, ему задают значение по умолчанию прямо в деструктуризации:
function Button({ label = "OK", type = "primary" }) { return <button className={type}>{label}</button>; }
<Button /> // label = "OK" <Button label="Купить" /> // label = "Купить"
Особый проп children содержит всё, что вложено между открывающим и закрывающим тегами компонента:
function Card({ children }) { return <div className="card">{children}</div>; }
<Card> <h2>Заголовок</h2> <p>Текст внутри карточки</p> </Card>
Здесь h2 и p попадут в children и отрисуются внутри div. children — основа компонентов-обёрток: карточек, модальных окон, контейнеров.