IF else && statement in React JSX

Hey guys I am having trouble understanding how to create an IF else & statement in React. All documentation, videos and questions that I find online only show the method of doing one of them, either an IF else or an &&

Basically the IF statement I am trying to create within the JSX looks like this.

If(data.AP == "1" && data.MP == "1")
{
set.Text("Both")
}
else if(data.AP == "0" && data.MP == "1")
{
set.Text("Manager")
}
else if(Data.AP == "1" && data.MP == "0")
{
set.Text("Payroll")
}
else{
setText("Not Approved)
}

A fairly simple IF statement in Java but I can't seem to find a way to translate this into JSX. So far this is the furthest I have got and it keeps giving me errors whenever I chop and change it depending on the documentation I am reading. I know how to use ?? Ternary operators and && operators but using them together doesnt seem to work for me.

 return (

   {
  data.MP == "1" && data.AP == "1" && (
     <td colSpan="1">{"Both"}</td> ) : null
  }

)

Solution 1:

You can concatenate as many if else as required:

data.AP == "1" && data.MP == "1" ? FIRST THEN HERE :
  data.AP == "0" && data.MP == "1" ? SECOND THEN HERE :
    data.AP == "1" && data.MP == "0" ? THIRD THEN HERE :
      ELSE THEN HERE

Replace the text with the desired expression

Solution 2:

Here's how I suggest you do it:

let text;
if (data.AP == "1" && data.MP == "1") {
    text = "Both";
} else if (data.AP == "0" && data.MP == "1") {
    text = "Manager";
} else if (data.AP == "1" && data.MP == "0") {
    text = "Payroll";
} else {
    text = "Not Approved";
}
// ...then when you want to display it:
{text}

...because that's easy to read and debug.

But if you really want to embed it in {...}, you can use a nested series of conditional operators:

{
    data.AP == "1" && data.MP == "1"
    ? "Both"
    : data.AP == "0" && data.MP == "1"
        ? "Manager"
        : data.AP == "1" && data.MP == "0"
            ? "Payroll"
            : "Not Approved"
}

Although you can make it fairly readable (though not very debuggable):

{
      data.AP == "1" && data.MP == "1" ? "Both"
    : data.AP == "0" && data.MP == "1" ? "Manager"
    : data.AP == "1" && data.MP == "0" ? "Payroll"
    :                                    "Not Approved"
}

If you use an automatic code formatter, it may well reformat it though.