Project Structure

Project structure of the app

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons-kit": "^2.0.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
}

Example: This example showcases a dynamic toggle switch controlled by the Dynamic App component, with UI updates based on state, and dynamic notifications indicating its status. Visual styles are managed through CSS classes, enabling modular reuse, and users can toggle the switch for immediate updates.

Javascript

import React, { useState } from "react";
import "./App.css";
const DynamicApp = () => {
    const [isToggled, setToggled] = useState(false);
 
    const handleToggle =
        () => {
            setToggled(
                (prevState) => !prevState);
        };
 
    return (
        <div className={
            `toggle-slider 
            ${isToggled ? "on" : "off"}`
        }>
            <h1>Switch Application</h1>
            <ToggleSwitch isToggled={isToggled}
                onToggle={handleToggle} />
            {isToggled ? (
                <p>The color switch is ON!</p>
            ) : (
                <p>The color switch is OFF!</p>
            )}
        </div>
    );
};
 
const ToggleSwitch =
    (
        {
            isToggled,
            onToggle
        }) => {
        return (
            <div
                className={
                    `toggle-switch
                    ${isToggled ? "on" : "off"}
                    `}
                onClick={onToggle}>
                <button>
                    {isToggled ? "Switch on" : "Switch off"}
                </button>
            </div>
        );
    };
 
export default DynamicApp;

CSS

/* App.css */
.App {
    font-family: sans-serif;
    text-align: center;
}
 
body {
    margin: 0;
    padding: 0;
}
 
.toggle-slider {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
 
.on {
    background-color: aqua;
}
 
.off {
    background-color: aliceblue;
}
 
button {
    padding: 10px 15px;
    border: none;
    background-color: grey;
}

Steps to run the app:

npm start

Output:

The output of the above code

Example 2: This example features a basic React component showcasing hide-and-display functionality toggled by a button click. Utilizing the useState hook, it manages visibility state for dynamic UI updates.

Javascript

import { useState } from "react";
 
export default function App() {
    const [showText, setShowText] = useState(true);
 
    const textVisibility = () => {
        setShowText(!showText);
    };
 
    return (
        <div className="App">
            <center>
                {!showText && (
                    <p>
                        w3wiki is a leading platform that provides
                        computer science resources and coding challenges for
                        programmers and technology enthusiasts, along with
                        interview and exam preparations for upcoming aspirants.
                        With a strong emphasis on enhancing coding skills and
                        knowledge, it has become a trusted destination for over
                        12 million plus registered users worldwide. The platform
                        offers a vast collection of tutorials, practice
                        problems, interview tutorials, articles, and courses,
                        covering various domains of computer science.
                    </p>
                )}
                <button onClick={textVisibility}>
                    {showText ? "Show some text" : "Hide it"}
                </button>
            </center>
        </div>
    );
}

CSS

/* Write CSS Here */
/* App.css */
.App {
    font-family: sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
}
 
button {
    color: white;
    background-color: black;
    padding: 10px 20px;
}

Step to run the app:

npm start

Output:

Output

How to implement Conditional Rendering in React?

This article explores JavaScript’s conditional rendering in React JS, including various methods, syntax, and applications, leveraging React’s virtual DOM, reusable components, props, and rapid rendering capabilities in single-page UI applications.

We will use the following approaches to implement conditional rendering in React

Table of Content

if-else statements
if-elseif statements
‘&&’ operator
‘&&’ operator with the alternative operator ‘||’
using ternary ( ?: ) operator

Tags:

#Geeks Premier League 2023 #React-Questions #Geeks Premier League #ReactJS #Web Technologies

Steps to Create the React App:

Project Structure

Javascript

CSS

Javascript

CSS

How to implement Conditional Rendering in React?

Similar Reads