Using OR operator in React js conditional rendering

When you are checking for multiple values, you can simplify with includes method

{ !["started", "cancelled"].includes(journey) && <Button> Cancel Journey </Button> }

Alternatively

{ journey === "stopped" && <Button> Cancel Journey </Button> }

or

{ ["stopped"].includes(journey) && <Button> Cancel Journey </Button> }

You have a logical error. A variable can not have two values at the same time which means that journey !== "started" || journey !== "cancelled" will always be true.

You probably want to use journey === "started" in order to display the Cancel Button

If there are only two options in your condition like "stared" and "cancelled" you can add ternary operator.

{journey === "stared" ? <Button>Journey Started</Button> : <Button>Journey Cancelled </Button>}

But if more options like ("stared","cancelled","completed","any other")

  {journey === "stared" && <Button>Journey Started</Button> }
  {journey === "cancelled" && <Button>Journey cancelled</Button> }
  {journey === "completed" && <Button>Journey completed</Button> }

This is an optional thing, It's a best practice not to use strings directly in conditions. Better you define them as type, or enum,(If using typescript with React) or just costs;

const STARTED = "started"
const COMPLETED = "completed"
const CANCELED = "canceld"

const journey = STARTED // Or anything the matches with the requirement.


{journey === STARTED ? <Button>Journey Started</Button> : <Button>Journey Cancelled </Button>}