How to use if else condition with variable in Reactjs

Question

I am working in Reactjs. Right now I am getting the current url/hostname. Now I want to use this URL with an if-else condition, which means I just want if url="/"(home page) then the first header should display otherwise second word should display. In other words, I want to know how we can use if-else condition with dynamic variable? Here is my current code

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url =router.asPath;


return (
    <>
    <div>
        //need to use if else condition based on "url" variable 
    </div>
   </>
    )

Shikhar Awasthi · Accepted Answer · 2022-07-08 07:00:37Z

3

You can use ternary operators there to render based on a condition, like this:

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url = router.asPath;

return (
    <>
    <div>
        {url === "something" ? <Foo /> : <Bar />}
    </div>
   </>
    )
}

edited Jul 8, 2022 at 7:00

answered Jul 8, 2022 at 6:19

Shikhar Awasthi

1,2341 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amit Over a year ago

giving me following error "ReferenceError: url is not defined"

Shikhar Awasthi Over a year ago

I have updated the answer. It will work now. Issue was due to one closing braces before return statement. I just copied your code and improvised it, didn't checked the code. It came from there.

Mark Rotteveel · Accepted Answer · 2023-02-05 11:15:29Z

0

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url = router.asPath;

return (
    <>
    <div>
        {url === "smth" ? <First /> : <Second />}
    </div>
   </>
    )
}

return (
    <>
    <div>
        {url === "smth" && <First />}
        {url === "smth" && <Second />}
    </div>
   </>
    )
}

You use both methods

edited Feb 5, 2023 at 11:15

Mark Rotteveel

110k241 gold badges160 silver badges233 bronze badges

answered Jul 8, 2022 at 7:57

Lobsang Gyatso

112 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to use if else condition with variable in Reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related