Fix issues

Author: ajay-dhangar

courses/react-js/begginer-level/building-user-interfaces/IfElseExample.js

@@ -7,9 +7,6 @@ description: "Learn how to conditionally render content in React based on compon
 tags: [courses, react-js, beginner-level, building-user-interfaces, conditional-rendering, if-else, ternary-operator, logical-operators]
 ---
 
-import IfElseExample from "./IfElseExample";
-import TernaryOperatorExample from "./TernaryOperatorExample";
-
 In this lesson, you will learn how to conditionally render content in React based on component state. Conditional rendering allows you to display different elements or components based on certain conditions, such as user interactions, API responses, or internal component state.
 
 ## Introduction to conditional rendering in React
@@ -52,10 +49,6 @@ function IfElseExample() {
 export default IfElseExample;
 ```
 
-<BrowserWindow minHeight="300px">
-  <IfElseExample />
-</BrowserWindow>
-
 In this example, we define a functional component called `IfElseExample` that conditionally renders content based on the `isLoggedIn` state. If the user is logged in (`isLoggedIn` is `true`), we display a welcome message and a "Logout" button. Otherwise, we show a "Login" button to allow the user to log in.
 
 ## Using the ternary operator for conditional rendering
@@ -86,10 +79,6 @@ function TernaryOperatorExample() {
 export default TernaryOperatorExample;
 ```
 
-<BrowserWindow minHeight="300px">
-  <TernaryOperatorExample />
-</BrowserWindow>
-
 In this example, we define a functional component called `TernaryOperatorExample` that uses the ternary operator to conditionally render content based on the `isError` state. If an error occurs (`isError` is `true`), we display an error message in red text. Otherwise, we show a button that triggers the error when clicked.
 
 ## Differences between if/else statements and the ternary operator

courses/react-js/begginer-level/building-user-interfaces/KeyPropExample.js

@@ -16,9 +16,6 @@ tags:
   ]
 ---
 
-import ListExample from "./ListExample";
-import KeyPropExample from "./KeyPropExample";
-
 In this lesson, you will learn how to render dynamic lists in React using arrays and the `map()` function. Dynamic lists allow you to display a collection of items in your components, such as a list of products, blog posts, or user comments. By iterating over an array of data and generating list items, you can create dynamic and interactive user interfaces.
 
 ## Introduction to rendering dynamic lists
@@ -50,7 +47,10 @@ export default ListExample;
 ```
 
 <BrowserWindow minHeight="300px">
-  <ListExample />
+  - Apple
+  - Banana
+  - Cherry
+  - Date
 </BrowserWindow>
 
 In this example, we define a functional component called `ListExample` that renders a list of items using the `map()` function. The `items` array contains four fruit names, and we use the `map()` function to generate a list item for each element in the array. The `key` prop is used to provide a unique identifier for each list item.
@@ -85,7 +85,10 @@ export default KeyPropExample;
 ```
 
 <BrowserWindow minHeight="300px">
-  <KeyPropExample />
+  - Apple
+  - Banana
+  - Cherry
+  - Date
 </BrowserWindow>
 
 In this example, we define a list of items as an array of objects, where each object contains an `id` and a `name` property. We use the `id` property as the `key` prop for each list item to ensure that React can identify and track the items correctly.
@@ -124,5 +127,4 @@ In this example, we define a list of products as an array of objects, where each
 
 ## Conclusion
 
-Rendering dynamic lists in React using arrays and the `map()` function is a powerful technique for displaying collections of data in your components. By iterating over an array of data and generating list items dynamically, you can create interactive and data-driven user interfaces. Remember to provide a unique `key` prop for each list item to optimize list rendering and maintain component state effectively.
-```
+Rendering dynamic lists in React using arrays and the `map()` function is a powerful technique for displaying collections of data in your components. By iterating over an array of data and generating list items dynamically, you can create interactive and data-driven user interfaces. Remember to provide a unique `key` prop for each list item to optimize list rendering and maintain component state effectively.

courses/react-js/begginer-level/building-user-interfaces/ListExample.js

@@ -16,9 +16,6 @@ tags:
   ]
 ---
 
-import WelcomeMessage from "./WelcomeMessage";
-import Counter from "./Counter";
-
 In this lesson, we will explore the concept of components in React and understand the structure and usage of functional and class-based components. Components are the building blocks of a React application, and they encapsulate the UI elements and logic of the application.
 
 ## What are components in React?
@@ -143,14 +140,30 @@ In this practice session, you will create a new functional component and a class
    export default App;
    ```
 
-    Now, run your React application and test the `WelcomeMessage` and `Counter` components to see how they work.
+   Now, run your React application and test the `WelcomeMessage` and `Counter` components to see how they work.
 
-    <BrowserWindow>
-        <div>
-            <WelcomeMessage />
-            <Counter />
-        </div>
-    </BrowserWindow>
+     <BrowserWindow>
+         <div>
+             Welcome to React!
+             <div>
+                <p>Count: <span id="count">0</span></p>
+                <button
+                style={{
+                  marginTtop: "10px",                  
+                  paddingTop: "15px",
+                  paddingBottom: "0",
+                  fontSize: "16px"}}
+                    onClick={
+                      () => {
+                        let count = parseInt(document.getElementById('count').textContent); document.getElementById('count').textContent = count + 1;
+                      }
+                    }
+                >
+                  Increment
+                </button>
+              </div>
+         </div>
+     </BrowserWindow>
 
 4. Experiment with the `WelcomeMessage` and `Counter` components by customizing their content and functionality. Try adding new features or modifying the existing components to enhance your React application. After making changes, test the components to see the updated behavior. And share your experience with us on our [Discord Community](https://discord.gg/5VjTyJcf).
 
@@ -165,7 +178,6 @@ In this practice session, you will create a new functional component and a class
 
 :::
 
-
 :::tip Quick Recap
 
 - Components are the building blocks of a React application that encapsulate UI elements and logic.

courses/react-js/begginer-level/building-user-interfaces/TernaryOperatorExample.js

@@ -15,9 +15,6 @@ tags:
   ]
 ---
 
-import MyComponent from "./MyComponent.js";
-
-
 In this lesson, we will explore JSX (JavaScript XML) and learn how to use it to build UI elements in React. JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a more readable and concise way to define UI components in React.
 
 ## What is JSX?
@@ -117,10 +114,6 @@ export default MyComponent;
 
 In this example, we define a functional component called `MyComponent` that renders a greeting message, conditional text, an image, a conditional paragraph, a list of fruits, and a composed `Button` component. We use JSX features like embedding expressions, defining attributes, conditional rendering, mapping arrays, and composing components to build the UI structure.
 
-<BrowserWindow>
-  <MyComponent />
-</BrowserWindow>
-
 Try modifying the JSX code and exploring different features to understand how JSX works and how you can use it to build UI elements in React.
 
 :::