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
  }

)