6 Conditional Rendering

6.1 If Statement

function OnMessage() {
    return <span>The Machine is On</span>
}
function OffMessage() {
    return  <span>The Machine is Off</span>
}
function OnOff(){
    if (true) {
        return <OnMessage />
  }else {
        return <OffMessage />
  }
}

function Machine() {
    const getMessage = () => {
        if (true) {
            return <OnMessage />
    }else {
        return <OffMessage />
    }
  }
    return <p>{getMessage()}</p>
}

function Machine() {
    let message = null
    if (true) {
    message = <OnMessage />
  } else{
    message = <OffMessage />
  }
  return <p>{message}</p>
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function OnMessage() {
            return <span>The Machine is On</span>;
        }
        function OffMessage() {
            return <span>The Machine is Off</span>;
        }
        function OnOff() {
            if (true) {
                return <OnMessage />
            } else {
                return <OffMessage />
            }
        }
        ReactDOM.render(
            <OnOff />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.01.56

Screenshot 2025-01-25 at 13.02.03

Screenshot 2025-01-25 at 13.02.26

Screenshot 2025-01-25 at 13.02.32

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function OnMessage() {
            return <span>The Machine is On</span>;
        }
        function OffMessage() {
            return <span>The Machine is Off</span>;
        }
        function Machine() {
            const getMessage = () => {
                if (true) {
                    return <OnMessage />
                } else {
                    return <OffMessage />
                }
            }
            return <p>{getMessage()}</p>
        }
        ReactDOM.render(
            <Machine />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.03.48

Screenshot 2025-01-25 at 13.03.55

Screenshot 2025-01-25 at 13.04.21

Screenshot 2025-01-25 at 13.04.27

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function OnMessage() {
            return <span>The Machine is On</span>;
        }
        function OffMessage() {
            return <span>The Machine is Off</span>;
        }
        function Machine() {
            let message = null;
            if (true) {
                message = <OnMessage />
            } else {
                message = <OffMessage />
            }
            return <p>{message}</p>
        }
        ReactDOM.render(
            <Machine />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.05.12

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function OnMessage() {
            return <span>The Machine is On</span>;
        }
        function OffMessage() {
            return <span>The Machine is Off</span>;
        }
        function Machine() {
            let message = null;
            if (true) {
                message = <OnMessage />
            } else {
                message = <OffMessage />
            }
            return <p>{message}</p>
        }
        ReactDOM.render(
            <Machine />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.06.07

Screenshot 2025-01-25 at 13.06.13

Screenshot 2025-01-25 at 13.07.27

Screenshot 2025-01-25 at 13.07.39

6.2 Ternary Operator

function Machine() {
    return <p>{true ? <OnMessage /> : <OffMessage />}</p>
}

const isError = true
const errorContainer = (
    <div className={isError ? "error" : "standard"}>
    {isError ? <p>Something went wrong... </p> : <p>Everythis is ok</p>}
  </div>
)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function OnMessage() {
            return <span>The Machine is On</span>;
        }
        function OffMessage() {
            return <span>The Machine is Off</span>;
        }
        function Machine() {
            return <p>{true ? <OnMessage /> : <OffMessage />}</p>
        }
        ReactDOM.render(
            <Machine />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.15.09

Screenshot 2025-01-25 at 13.15.16

Screenshot 2025-01-25 at 13.15.44

Screenshot 2025-01-25 at 13.16.08

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        const isError = true
        const errorContainer = (
            <div className={isError ? "error" : "standard"}>
                {isError ? <p>Something went wrong... </p> : <p>Everythis is ok</p>}
            </div>
        )
        ReactDOM.render(
            errorContainer,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.24.45

Screenshot 2025-01-25 at 13.25.12

6.3 AND Operator

function ErrorMessage() {
  return <span>Something went wrong</ span>
}

function Machine() {
    return <p>{true && <ErrorMessage />}</p>
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
    <script type="text/babel">
        function ErrorMessage() {
            return <span>Something went wrong</ span>
        }

        function Machine() {
            return <p>{true && <ErrorMessage />}</p>
        }
        ReactDOM.render(
            <Machine />,
            document.getElementById("root")
        );
    </script>

</html>

Screenshot 2025-01-25 at 13.28.04

Screenshot 2025-01-25 at 13.28.09