Components Inside Components in JavaScript

Some components are frames: the outside is always the same, and the inside is different each time. HTML tags work like this, since a section can hold anything. Your own components can too. Whatever you put between <Section> and </Section> arrives in a special prop called children.

Here is a frame for a notice:

function Notice({ children }) {
  return <div className="notice">{children}</div>;
}

<Notice>
  <p>We're hiring!</p>
</Notice>

Notice draws a div, and inside it the paragraph written between its tags. Next time it can wrap something else. Normal props, like title="Products", still work next to children. If the component never draws children, what you put between its tags simply doesn't appear.

App (read-only) uses Section twice: around the product count and the list, and around the opening hours. When you press Check, the page must show:

section "Products"
  heading 2: Products
  text: 8 products
  list
    … 8 items, Mug to Gift card
section "Opening hours"
  heading 2: Opening hours
  text: Monday to Saturday, 9:00 to 18:00
  text: Sunday: closed

Your task: in src/Section.jsx, draw the title in an h2, then the children under it.

Assignment
Follow the Coding Tutorial to make Section draw its title and whatever App puts between its tags.

Hint
title and children are already in the function's braces. Each one goes in curly braces inside the section.