Badges and Chapters

The book works; now it'll help you choose. Badges say which recipes are vegetarian and which are quick, and chapters keep the soups apart from the main dishes. And desserts? There are none yet, and the book should say so.

Badges. A vegetarian recipe gets the badge Vegetarian, and a recipe that takes less than 20 minutes gets the badge Quick. Each badge is a span with the class badge, in the card under the name. A recipe can have both badges, one of them or none.

Chapters. The book has three chapters: Soups (the recipes whose course is "soup"), Main Dishes ("main") and Desserts ("dessert"). Each chapter is a section with its title in an h2, and under it, the cards of its recipes, in the order of the array. A chapter without recipes says No recipes yet. under its title.

Three chapters that look the same are a job for a component: there's a new, empty file for it, Chapter.jsx. It can get the chapter's title and recipes in its props, and App can filter the recipes for each chapter.

A tip: for each condition, think about what it gives. recipe.vegetarian is true or false. But what's the length of an empty array, and what does React show for it?

That's the whole project. Your recipe book is made from data: add a recipe to recipes.js, a dessert for example, and it shows up in the right chapter with the right badges, without a change to a single component. That's how React apps work: the components say how to show the data, and the page follows the data. So far, though, the data never changes while the page is open. In the next lesson, Events, your components will start to react to the user: to clicks and to typing.