Skip to content

DEV Community

Stop rendering conditions like this

abdelrahman seada on July 15, 2024

we use conditions everywhere on our applications whether for state check or rendering some data into the view depending on some parameters. in this...

Read full post

Shrijal Acharya • Jul 17 '24 • Edited

Just one simple piece of advice: Instead of using 4 spaces for indentation in code snippets for blogs, I think it's better to use 2 spaces as it reduces the need for horizontal scrolling.

Great read. 👌

abdelrahman seada • Jul 17 '24

thanks for this advice 🤍

John • Nov 14 '24

How about using the tab character? That what it is meant for and every one can set the space to what ever fits best for one.

bop • Jul 19 '24

github.com/gvergnaud/ts-pattern

this is also a good alternative

Alexander Morgun • Aug 29 '24

As always, all gold is in comments :)

abdelrahman seada • Jul 19 '24

will try it thanks 💕

mttdev-br • Nov 15 '24

beautiful stuff! rust inspired, perhaps?

KristofaJosh • Nov 14 '24

Nice read!! a little improvement for the action array.

const actions = {
  create: 'create',
  read: 'read',
  update: 'update',
  delete: 'delete',
} as const;

create a type of actions

type Actions = (typeof actions)[keyof typeof actions];

then

const userActionsStates : Record<UserType , Actions[] > = {
    admin: ["create", "read", "update", "delete"], // action.create | action.delete
    editor: ["create", "read", "update"],
    user: ["read", "update"],
    default : ["read"]
}

Voila!
no one should add something weird within 😏
...

abdelrahman seada • Nov 18 '24

that's a great one thanks

Brian Cao • Jan 12 '25 • Edited

My approaching as following

/**
 * You declare the data in type of array
 * Then, you can loop through the list when you neeed
 */

const ACTIONS = ['create', 'read', 'update', 'delete'] as const
const USER_TYPES = ['admin', 'editor', 'user', 'anonymous'] as const

/**
 * Types guard
 */
type Action = typeof ACTIONS[number]
type UserType = typeof USER_TYPES[number]

/**
 * Your userActions data with types guard
 */
const userActions : Record<UserType , Action[] > = {
    admin: ["create", "read", "update", "delete"],
    editor: ["create", "read", "update"],
    user: ["read", "update"],
    anonymous: ["read"]
}

abdelrahman seada • Jan 16 '25

good one too ⭐

abdelrahman seada • Jul 16 '24 • Edited

didn't expect that anyone would see this post

Shahadat Hossain • Oct 8 '24

I think this is not a matter of condition. It's a matter of good practice. Example 1 is easy to understand for beginners, but the other one is good to maintain and easy to extend.

abdelrahman seada • Oct 10 '24

it's a better way to write conditions as you said easy to maintain , extend and debug

Aayush Goyal • Jan 6 '25

Little things like these make you a pro developer. All the best to everyone and thanks to the author for sharing a good and short article.

abdelrahman seada • Jan 16 '25

awesome comment award 🌃⭐

Tahdi Islam • Feb 6 '25

Valuable, Thanks for sharing

Berkan Serbes • Dec 27 '24

Inspiring 👍

Hamdi Kamel • Sep 25 '24

This is great!

You get to simplify things further by creating objects with properties that point to specific values instead of checking nonstop for multiple values.

abdelrahman seada • Oct 5 '24

that's exactly it

abdulrhman-moh • Aug 26 '24

this is awesome

abdelrahman seada • Aug 26 '24

you are awesome

Mohammed CHRIATT • Aug 31 '24

Thank you 🙏

abdelrahman seada • Sep 2 '24

You're welcome 💕

threestarss • Aug 31 '24 • Edited

There is nothing wrong with conditions, you just reshaped the data you are working with

abdelrahman seada • Sep 2 '24

exactly, there is nothing wrong with conditions anyways , it's just a better approach

KookaKoora • Aug 31 '24

Amazing tip!

abdelrahman seada • Sep 2 '24

thanks <3

O.Tito.R. • Oct 11 '24

Thank you for posting, I am aspiring to be able to write and understand fluently! Reading these articles from inside perspectives helps tremendously!

abdelrahman seada • Oct 20 '24

glad to hear that 🤍

Sidhant Pandey • Oct 13 '24

Really Great Approach, Surely i am going to use in my Project, Awsome Thanks!

abdelrahman seada • Oct 20 '24

that's awesome, have a good one

Leon Gattermayer • Nov 12 '24

One more small advice. Just use ENUM for those roles across the project.

VavaXX2 • Nov 12 '24

imperative vs declarative

Tinashe Gunda • Jul 16 '24

Well executed!

abdelrahman seada • Jul 16 '24

thanks 🤍

Ehsan Safari • Jul 19 '24

You are doing great

abdelrahman seada • Jul 19 '24

thanks 💕

Mateus Guedes • Jul 16 '24

Nice one!!!

abdelrahman seada • Jul 16 '24

thanks :)

Hugo Pineda • Dec 10 '24

no thank you. Over-abstractions are harder to maintain when the app grows.

abdelrahman seada • Dec 11 '24

Over-abstractions ?
so when your app grows abstractions is harder to maintain.
Ok

Hugo Pineda • Dec 11 '24

Exactly.

Isaac Klutse • Jul 16 '24

very understandable.

abdelrahman seada • Jul 16 '24

thanks 🤍🔥

alyouma akmal • Jul 16 '24

Nice code

abdelrahman seada • Jul 16 '24

thanks 🤍

Ronak Khunt • Jul 16 '24

Well explained!

abdelrahman seada • Jul 16 '24

thanks 🤍

Mohammed BENGUEZZOU • Jul 17 '24

Brilliant <3

abdelrahman seada • Jul 17 '24

thanks 🤍

KEY UNG KIM • Jul 17 '24

thanks 👌

abdelrahman seada • Jul 17 '24

you are welcome 😌🤍

Bernardo Guerreiro • Jul 16 '24

great

Abdelrahman Seada • Jul 16 '24

thanks ♥️

Nwosa Tochukwu • Jul 16 '24

Nice. Thank you for this

abdelrahman seada • Jul 16 '24

thanks 🤍😌

SUYASH AGNIHOTRI • Jul 16 '24

Nice explanation.

abdelrahman seada • Jul 16 '24

thanks 🤍

ngocleDevMobile • Jul 17 '24

Greate!!!!!

abdelrahman seada • Jul 17 '24

thanks 😌

Olu • Jul 17 '24

I like this.

abdelrahman seada • Jul 17 '24

thanks 🤍

Harshad • Jul 17 '24

Nice

abdelrahman seada • Jul 17 '24

thanks 🤍

Gabriele Zizzari • Sep 7 '24

Perfect explanation!!!
simple way to do clean code :)

abdelrahman seada • Sep 9 '24

happy to hear that 💕