Joyeeta Nandi's Blog

React Conditional Rendering

Joyeeta Nandi's photo
Joyeeta Nandi
·

1 min read

App.js

import React from "react";
import "./App.css";

function AdminUser() { 
  return (
    <h1>Admin users only</h1>
  );
}

function GeneralUser() {
  return <h1>This is for everyone</h1>;
}

function App(props) {
  return (
    <>
      {props.admin ? (
        <AdminUser />
      ) : (
        <GeneralUser />
      )}
    </>
  );
}
export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <App admin={false} />,
  document.getElementById("root")
);

Output

image.png

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <App admin={true} />,
  document.getElementById("root")
);

Output

image.png