How to use the ternary operator in react? - reactjs

Question

i want to use ternary operator instead of if else conditions in react.
What i am trying to do?
I have an array of object type named 'list_info' which has type, recipient_idand recipient_email attributes.
Now i have a method named "get_text" which returns text whose value is string "to you" or the recipient email.
If the list_info type is "type_1" and props.current_user_id === list_info.recipient_id then it should
return nothing.
If the list_info type is "type_1" and props.current_user_id !== list_info.recipient_id then it should
return the list_info.recipient_email.
Now when the list_info type is anything other than "type_1" and and props.current_user_id ===
list_info.recipient_id then it should
return string "to you".
If the list_info type is anything other than "type_1" and props.current_user_id !==
list_info.recipient_id then it should return the list_info.recipient_email.
So to accomplish the above conditions i have the "get_text" method as below,
get_text = () => {
const list_info = this.props.list_info;
let text;
if (this.props.list_info.type === 'type_1') {
if (this.props.current_user_id === list_info.recipient_id) {
text = '';
} else {
text = list_info.recipient_email;
}
} else {
text = this.props.current_user_id === list_info.recipient_id
? 'you'
: list_info.recipient_email;
}
return <strong key={list_info.type}>{text}</strong>;
};
The above code works. But i think it could be made even more simple to read using ternary operator. could someone help me fix this. thanks.

Answer 1

Generally writing nested ternary operators will make the code unreadable. You can refactor your code as below, if you have more and more conditions/logic coming in, you can probably start using switch statement.
get_text = () => {
const { list_info, current_user_id } = this.props;
const meTextByType = list_info.type === 'type_1' ? "" : "you";
let text = current_user_id === list_info.recipient_id ?
meTextByType :
list_info.recipient_email;
return <strong key={list_info.type}>{text}</strong>;
};

Answer 2

get_text = () => {
const { list_info, current_user_id } = this.props;
const { type, recipient_id, recipient_email } = list_info;
const meTextByType = type === 'type_1' ? "" : "you";
let text = current_user_id === recipient_id ? meTextByType :brecipient_email;
return <strong key={type}>{text}</strong>;
};

Answer 3

How about local functions that describe exactly what each condition is, and by the looks of you only ever return 2 values, either 'to you' or the recipient_email prop.
getText = () => {
const isToYou = () => listInfoType !== 'type_1' && recipientId === userId
return isToYou() ? 'To You' : recipientEmail
}