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
}
)
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
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.