extra!

src/foodItems.tsx

@@ -4,10 +4,12 @@ import { FoodExcludeTypes } from "./types";
 export const FoodItemsContainer = (props: {
   children: JSX.Element | JSX.Element[] | null
   title: string,
+  extra?: string,
 }): JSX.Element => {
   return (
     <div>
       <h3>{props.title}</h3>
+      {props.extra && <p>{props.extra}</p>}
       <div class="list-group" role="list">
         {props.children}
       </div>

src/mainPage.tsx

@@ -120,7 +120,7 @@ export class MainPage extends Component<unknown, { toggles: FoodExcludeTypes }>
 
       <br />
 
-      <FoodItemsContainer title="Breakfast">
+      <FoodItemsContainer title="Breakfast" extra="don't often have breakfast, but this is what we would have">
         <FoodItem title="Marmite Toast" />
         <FoodItem title="Bagels" />
         <AdvancedFoodItem title="Jam Toast" extra={"light thin layer of jam, not chunky jam; jams like cloudberry, strawberry, raspberry, orange"} />