If statement in Jsx render based on data-CodePudding

Whats simplest way to write a if statement in jsx when its based on data your receiving

how can i check the other code at the same time-if that makes sense? so if its not "P" then i want to make sure the other value is deffo a "L"?

code = P so output “Walking” code = L so output "Running"

    text={
if(exercise.code = P)
{ "Walking"} 
else (exercise.code = L) 
{"Running"}}

CodePudding user response：

{
  exercise?.code === "P" ? "Walking" : exercise?.code === "L" ? "Running" 
  : null 
}

Here {} means you are in JS and can write if conditions. ? : is ternary operator.

CodePudding user response：

{ exercise.code === "P" ? "Walking" : "Running" }

CodePudding user response：

Create an object to use as a mapping:

const codeMap = {
  C: "Crawling",
  P: "Walking",
  L: "Running
};

Then you can perform a lookup in your JSX:

... { codeMap[excercise?.code] || "Unknown/missing code" } ...

That will allow you to have as many codes as you want, and the JSX will not have to be changed.

CodePudding user response：

switch(excercise?.code){
   case 'P': return 'Walking';
   case 'L': return 'Running';
}

CodePudding user response：

this will solve your problem

{exercise.code == "P" && "Walking" || exercise.code == "L" && "Runing"}