Render a component in jsx if a certain condition is met

Really new to react, I have this part of navigation in my Navbar.js using react-router-dom useLocation hook, I am able to get the active path I have to views and I want to render custom text when a user arrives at the view with JSX something like

if(path==="login" || path==="signin"){
  `<h1>welcome</h1> ${userName}!` 
}

How can I check if condition A or B is met then render the appropriate text using jsx

>Solution :

You can use the ternary operator for conditional rendering in JSX like

{path==="login" || path==="signin" ? <> <h1>welcome</h1> {userName} </> : null}

Simple 🙂