Ternary Operator - Conditional Rendering Advance
Wed Jun 21 2023 00:23:59 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
import React from "react";
import Form from "./Form";
var isLoggedIn = false;
function App() {
return <div className="container">
{isLoggedIn === true ? <h1>Hello Men</h1> : <Form />} // one option
{isLoggedIn ? <h1>Hello Men</h1> : <Form />} // second option due the condition is already a boolean
{isLoggedIn ? <h1>Hello Men</h1> : null} // // third option you can set the false as nothing
{isLoggedIn && <h1>Hello Men</h1> } // // fourth option exact as above null set but the condition is a double check expresion. Condition && Expresion => False && omit or True && render the expresion
</div>;
}
// alternative method of using this is by applying styles
var condition = true;
const customStyle = {color: "red"};
<p style={condition ? customStyle : nill} show the color if true or not </P
export default App;
content_copyCOPY
Inject the function and action in one single expression wich is the Ternary Operator
Comments