React: how to write if - else conditional statement in react jsx

Question

I am trying to create a condition statement for the url that the user would click, what i want to do is this, check if the message.sender.id === user_id, then i want to change the url to ${/inbox/}${message.reciever.id}${"/"} and if the message.sender.id !=== user_idi need url to be ${/inbox/}${message.sender.id}${"/"}

i don't know the best way to do this becuase the url is supposed to be in a map

{
  message.map((message) => (
    <Link className="chat-contacts-item" to={message.sender.id === user_id && `${/inbox/}${message.reciever.id}${"/"}`}>
     <p className="float-left">{message.message}</p>
    </Link>
  )
)}

<Link className="chat-contacts-item" to={message.sender.id === user_id &&`${/inbox/}${ message.reciever.id}${'/'}`}> 
    Click Now
</Link>

This is the one I wrote, how to write else statement here

{message.sender.id === user_id && 
  `${/inbox/}${ message.reciever.id}${'/'}`
}

`{message.sender.id === user_id ? ${/inbox/}${ message.reciever.id}${'/'} : ${/inbox/}${message.reciever.id}${'/'}}` its missing the backtick because of the way comments are formatted but you just need to add them for the strings — Anon, Feb 20 '23 at 16:42
You can use "ternary operator" ` condition === something? "true" : "not true"` — SlothOverlord, Feb 20 '23 at 16:43
@DestinyFranks You likely forgot to add backticks. stackoverflow turns them into code field. Make sure that your true and false statements are enveloped in backticks, just like in your example — SlothOverlord, Feb 20 '23 at 16:47
Please look for [official docs.](https://reactjs.org/docs/conditional-rendering.html) — adampweb, Feb 20 '23 at 16:48
Please [***search***](/search?q=jsx+if+else) before posting. More about searching [here](/help/searching). — T.J. Crowder, Feb 20 '23 at 16:56

score 0 · Answer 1 · answered Feb 20 '23 at 16:49

You can define the link before returning the UI, its better readable code. Also, you can use same condition inside the to={..}

We call it ternary operator something ? do this : else do this

I hope this answer can help.

{message.map((message) => {
 const link = message.sender.id === user_id ? `${/inbox/}${message.reciever.id}${"/"}` : `${/inbox/}${message.sender.id}${"/"}`
    return (<Link className="chat-contacts-item" to={link}>
                <p className="float-left">{message.message}</p>
            </Link>
    )
})}

score 0 · Accepted Answer · answered Feb 20 '23 at 16:50

0

<Link 
  className="chat-contacts-item" 
  to={"/inbox/" + (message.sender.id === user_id ? message.reciever.id : message.sender.id) + "/"}
>
    <p className="float-left">{message.message}</p>
</Link>

answered Feb 20 '23 at 16:50

Kostya GL

62
6

score 0 · Answer 3 · edited Feb 22 '23 at 10:49

0

Cleanest way to do it in my opinion:

{
    message.map((message) => (
        <Link
            className='chat-contacts-item'
            to={`${/inbox/}${
                message.sender.id === user_id ? message.receiver.id : message.sender.id
            }${'/'}`}
        >
            <p className='float-left'>{message.message}</p>
        </Link>
    ));
}

edited Feb 22 '23 at 10:49

Sunderam Dubey

1
11
20
40

answered Feb 20 '23 at 16:55

damonholden

1,062
4
17

React: how to write if - else conditional statement in react jsx

3 Answers3