This content originally appeared on DEV Community and was authored by Joseph Martin
For my phase 2 project with Flatiron school I decided to make a cook book to store some of my favorite recipes, and some new ones that I would like to try. This web application was written with React, and this is my first React project. I had a lot of fun working on this project. The major features of this project are the list of recipes that can be filtered in to category's,
and a form to add new recipes to the database.
On the list of recipes you can click on one to see the full recipe.
One piece of code that was both challenging, and a lot of fun to work on was the filter. First I had to create a dropdown to select a category.
<div id="category-filter">
<label htmlFor="category">Filter By: </label>
<select name="category">
<option value="all">Choose a Category...</option>
<option value="appetizers">Appetizers</option>
<option value="beverages">Beverages</option>
<option value="breakfast">Breakfast</option>
<option value="desserts">Desserts</option>
<option value="main dishes">Main Dishes</option>
<option value="salads">Salads</option>
<option value="side dishes">Side Dishes</option>
<option value="soups and stews">Soups and Stews</option>
</select>
</div>
After That I had to control the form in state so I could access the value later.
// the recipes prop is a list of recipes from an api
function RecipePage({ recipes }) {
{/* here I set the initial state */}
const [filterBy, setFilterBy] = useState("all")
<div>
<label htmlFor="category">Filter By: </label>
{/* now I can set the value and onChange */}
<select
name="category"
value={filterBy}
onChange={e => setFilterBy(e.target.value)}
>
{/* ...
options
... */}
</select>
{/* pass recipes and filterBy in to RecipeList */}
<RecipeList recipes={recipes} filterBy={filterBy} />
</div>
}
Now that I have the value of the dropdown stored in state as filterby, I can pass that value in to RecipeList. In RecipeList we receive two props, recipes, the list of recipes, and filterBy, the selected category on the dropdown. For recipes, I don't want to alter it (I'll need the original list later) so I create a new variable in state, filteredRecipes. Next, I filter through the list of recipes and find all of the recipes that match the currently selected category. Then, I save those recipes to filteredRecipes so I can re-render the list with just the selected recipes.
function RecipeList({ recipes, filterBy }) {
// set new state variable
const [filteredRecipes, setFilteredRecipes] = useState([])
//This is a side effect that runs everytime filterBy changes
useEffect(() => {
if (filterBy === "all") {
setFilteredRecipes(recipes)
} else {
// first, I create a new array
let newFilteredRecipes = []
// next I filter through the list
recipes.filter(recipe => {
// if the category's match,
if (recipe.category === filterBy) {
// add the recipe to the array
newFilteredRecipes.push(recipe)
}
})
// set the new filtered list to filteredRecipes
setFilteredRecipes(newFilteredRecipes)
}
}, [filterBy])
// now the JSX has filtered recipes to work with
return (
<div>
{filteredRecipes.length !== 0 &&
filteredRecipes.map(recipe => (
<RecipeListing key={recipe.id} recipe={recipe} />
))
}
</div>
)
}
In conclusion, I created a dropdown, and I controlled the dropdown in state. Then, I compared each recipes category to the value in state. Lastly, I stored the new list of filtered recipes in it's own state variable as to not alter the original list and to re-render the filtered list.
This content originally appeared on DEV Community and was authored by Joseph Martin
Joseph Martin | Sciencx (2022-02-08T23:15:45+00:00) My Cook Book. Retrieved from https://www.scien.cx/2022/02/08/my-cook-book/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.