javascript - Using OR operator in React js conditional rendering - Stack Overflow

admin管理员组

文章数量:1429578

I want to conditionally render a button based on two conditions. Am not really sure if am doing it the right way.

But i get this error This condition will always return 'true' since the types '"started"' and '"cancelled"' have no overlap.ts(2367) where the red underline is.

Am using React js with typescript

I want to conditionally render a button based on two conditions. Am not really sure if am doing it the right way.

But i get this error This condition will always return 'true' since the types '"started"' and '"cancelled"' have no overlap.ts(2367) where the red underline is.

Am using React js with typescript

• javascript
• reactjs
• typescript
• react-native

Share Improve this question Follow asked Jul 22, 2020 at 8:36 okumu justineokumu justine 36811 gold badge66 silver badges1212 bronze badges 3

• So when do you want to show the button? – Shahnawaz Hossan Commented Jul 22, 2020 at 8:39
• This has nothing to do with React, it's a simple logic error. Your condition will always be true, since journey will always be different from either "started" or "cancelled", no matter which value it actually has. You probably want to replace that || with another && – user5734311 Commented Jul 22, 2020 at 8:42
• when journey !== "started" and journey !== "cancelled" is true, because it has about three states (started, cancelled and stopped) – okumu justine Commented Jul 22, 2020 at 8:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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","pleted","any other")

  {journey === "stared" && <Button>Journey Started</Button> }
  {journey === "cancelled" && <Button>Journey cancelled</Button> }
  {journey === "pleted" && <Button>Journey pleted</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 = "pleted"
const CANCELED = "canceld"

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


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

本文标签： javascriptUsing OR operator in React js conditional renderingStack Overflow