Quick example on how to do conditionals in React

Here's a quick example on how to do conditionals in React

First, you create a component for each condition in your app (called App2 in this example):

function GrantAccessMessage() {
  return <h2>Access Granted!</h2>
}
function DeniedAccessMessage() {
  return <h2>Access Denied!</h2>
}

Next, call both components inside your app component by using shorthand/ternary conditional statement. This has to be wrapped inside brackets.

Please note we'll be adding a manual true/false value to the "access" component attribute in our index.js file

function App2(props) {
  return (
    <>
      {(props.access) ? <GrantAccessMessage /> : <DeniedAccessMessage />};
    </>
  )
}

Now, export your app:

export default App2;

Add a manual true/false value to the "access" component attribute in our index.js file

import App2 from './App2';

ReactDOM.render(
  <App2 access={false} />,
  document.getElementById('root')
);

That's it!