JS only execute if statement based on condition

Question

I am fetching data from an api and I need to render a component based on an if statement and I cant seem to figure it out. A customer has an array of roles. Customer.items is an array of customer objects. This is the if statement I am trying but doesnt work:

{customers?.items?.length > 1 && !roles.includes("Super") && (...component

Basically I need to check if roles array has "Super" and customers.items only has one element then dont render the component.

Also if roles is "Super" and customer.items.length > 1 then still render the component

customers.items: [{id: 2, name: "G"}, {id: 3, name: "H"}]
roles: ["Super", "Admin"]

Please give a sample snippet of your customers object and roles array — SARAN SURYA
– SARAN SURYA, Commented Feb 4, 2021 at 4:36

Arun Kumar Mohan · Accepted Answer · 2021-02-04 04:56:55Z

2

This will render the component in all cases except when customers.items has only one element and if the roles include 'Super'.

const hasSingleCustomer = customers?.items?.length === 1
const hasSuperRole = roles.includes('Super'))


{!(hasSingleCustomer && hasSuperRole) && <Component />}

You can also write it as {(!hasSingleCustomer || !hasSuperRole) && <Component />} if you prefer.

edited Feb 4, 2021 at 4:56

answered Feb 4, 2021 at 4:37

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ousmane784 Over a year ago

Maybe I worded it weirdly but the only condition when the component should NOT render is when the role is super and customer.items.length === 1

ousmane784 Over a year ago

If role is "Admin" it doesnt matter what the length is, still render component

Arun Kumar Mohan Over a year ago

@ousmane784 Ah, got it. Let me update my answer.

ousmane784 Over a year ago

Sorry, If role is "Admin" and customer.items.length === 0 the component should still render

Rajesh Dixit Over a year ago

@ousmane784, please list down all conditions in your question

|

SARAN SURYA · Accepted Answer · 2021-02-04 04:46:41Z

1

You can try this approach

{(customers.items.length > 1 && roles.includes("Super")) ? <If Success Component/> : <Failure Component>}

I have written as per your request, as I am checking if the roles array has "Super" in it, You can still manipulate the operation inside the brackets(), and we have to use ? and : to make sure the conditions work,

Happy Coding :)

answered Feb 4, 2021 at 4:46

SARAN SURYA

5545 silver badges18 bronze badges

Comments

Arun Kumar Mohan · Accepted Answer · 2021-02-04 05:02:15Z

1

My suggestion is to split the equation/ conditions into smaller variables and then use them to create a validity condition. This way, your code is more readable and easier to maintain

const length = customers.items.length
const isSuperUser = roles.includes('Super')
const isAdminUser = roles.includes('Admin')
const isAllowedForSuper = isSuperUser && length === 1
const isAllowedForAdmin = isAdminUser && length === 0

if (isAllowedForSuper || isAllowedForAdmin) {
  return <Component {...props} />
}
return null

edited Feb 4, 2021 at 5:02

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

answered Feb 4, 2021 at 4:52

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Collectives™ on Stack Overflow

JS only execute if statement based on condition

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related