add conditional rendering pattern

addyosmani · Apr 30, 2023 · ccc1461 · ccc1461
1 parent 3e7ed6a
commit ccc1461
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/ch12/react_conditional.html b/ch12/react_conditional.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React Conditional Rendering - Recipe App</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+
+        .container {
+            margin-top: 2rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container" id="root"></div>
+    <script type="text/babel">
+        const { useState } = React;
+        const RecipeApp = () => {
+            const [recipes, setRecipes] = useState([
+                { id: 1, name: 'Pizza', instructions: 'Prepare the dough, add toppings, and bake.' },
+                { id: 2, name: 'Pasta', instructions: 'Cook pasta, prepare sauce, and combine.' },
+                { id: 3, name: 'Burger', instructions: 'Grill the patty, prepare bun and toppings, and assemble.' }
+            ]);
+
+            const [showInstructions, setShowInstructions] = useState(null);
+
+            const handleClick = (id) => {
+                setShowInstructions(showInstructions === id ? null : id);
+            };
+
+            return (
+                <div>
+                    <h1 className="mb-4">Recipe App</h1>
+                    <p>Conditional rendering is a powerful pattern in React that allows you to display content based on certain conditions. In this simple recipe app, we use conditional rendering to show or hide the recipe instructions when a recipe's name is clicked.</p>
+                    <ul className="list-group">
+                        {recipes.map(recipe => (
+                            <li key={recipe.id} className="list-group-item">
+                                <button className="btn btn-link text-decoration-none" onClick={() => handleClick(recipe.id)}>{recipe.name}</button>
+                                {showInstructions === recipe.id && <p className="mt-2">{recipe.instructions}</p>}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            );
+        };
+
+        ReactDOM.render(<RecipeApp />, document.getElementById('root'));
+    </script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -459,7 +459,11 @@ <h2>Chapter 12: React Patterns</h2>
                                 href="https://tmdb-load-more.netlify.app/">Demo</a>)</li>
                         <li><a href="https://github.com/addyosmani/tmdb-viewer">Virtual List Pattern</a> (<a
                                 href="https://tmdb-viewer.netlify.app/">Demo</a>)</li>
-                        <li><a href="./ch12/react-twitter/">React: Observers + Facade + Mixins</a></li>
+                                <li><a href="./ch12/react_provider.html">React: Provider Pattern</a></li>
+                                <li><a href="./ch12/react_compound.html">React: Compound Component Pattern</a></li>
+                                <li><a href="./ch12/react_reducer.html">React: State Reducer Pattern</a></li>
+                                <li><a href="./ch12/react_conditional.html">React: Conditional Rendering Pattern</a></li>
+                                <li><a href="./ch12/react-twitter/">React: Observers + Facade + Mixins</a></li>
                         <li><a href="./ch12/react_hoc.html">React: Higher-Order Components</a></li>
                         <li><a href="./ch12/react_hoc_composition.html">React: HOC Composition</a></li>
                         <li><a href="./ch12/react_render_props.html">React: Render Props</a></li>
@@ -479,9 +483,6 @@ <h2>Chapter 12: React Patterns</h2>
                         <li><a href="./ch12/react_usestate.html">React: useState</a></li>
                         <li><a href="./ch12/react_tweets_stateful.html">React: Tweets (Stateful)</a></li>
                         <li><a href="./ch12/react_tweets_hooks.html">React: Tweets (Hooks)</a></li>
-                        <li><a href="./ch12/react_provider.html">React: Provider Pattern</a></li>
-                        <li><a href="./ch12/react_compound.html">React: Compound Component Pattern</a></li>
-                        <li><a href="./ch12/react_reducer.html">React: State Reducer Pattern</a></li>
                     </ul>
                 </section>