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 • 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

thanks for this advice 🤍

John • Nov 14

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.

github.com/gvergnaud/ts-pattern

this is also a good alternative

abdelrahman seada • Jul 19

will try it thanks 💕

Alexander Morgun • Aug 29

As always, all gold is in comments :)

mttdev-br • Nov 15

beautiful stuff! rust inspired, perhaps?

KristofaJosh • Nov 14

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

that's a great one thanks

Shahadat Hossain • Oct 8

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

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

abdelrahman seada • Jul 16 • Edited

didn't expect that anyone would see this post

Hamdi Kamel • Sep 25

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

that's exactly it

abdulrhman-moh • Aug 26

this is awesome

abdelrahman seada • Aug 26

you are awesome

KookaKoora • Aug 31

Amazing tip!

abdelrahman seada • Sep 2

thanks <3

VavaXX2 • Nov 12

imperative vs declarative

Leon Gattermayer • Nov 12

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

threestarss • Aug 31 • Edited

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

abdelrahman seada • Sep 2

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

Sidhant Pandey • Oct 13

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

abdelrahman seada • Oct 20

that's awesome, have a good one

O.Tito.R. • Oct 11

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

glad to hear that 🤍

Mohammed CHRIATT • Aug 31

Thank you 🙏

abdelrahman seada • Sep 2

You're welcome 💕

Ehsan Safari • Jul 19

You are doing great

abdelrahman seada • Jul 19

thanks 💕

Tinashe Gunda • Jul 16

Well executed!

abdelrahman seada • Jul 16

thanks 🤍

Mateus Guedes • Jul 16

Nice one!!!

abdelrahman seada • Jul 16

thanks :)

Mohammed BENGUEZZOU • Jul 17

Brilliant <3

abdelrahman seada • Jul 17

thanks 🤍

alyouma akmal • Jul 16

Nice code

abdelrahman seada • Jul 16

thanks 🤍

Isaac Klutse • Jul 16

very understandable.

abdelrahman seada • Jul 16

thanks 🤍🔥

KEY UNG KIM • Jul 17

thanks 👌

abdelrahman seada • Jul 17

you are welcome 😌🤍

Ronak Khunt • Jul 16

Well explained!

abdelrahman seada • Jul 16

thanks 🤍

Harshad • Jul 17

Nice

abdelrahman seada • Jul 17

thanks 🤍

SUYASH AGNIHOTRI • Jul 16

Nice explanation.

abdelrahman seada • Jul 16

thanks 🤍

Bernardo Guerreiro • Jul 16

great

Abdelrahman Seada • Jul 16

thanks ♥️

Nwosa Tochukwu • Jul 16

Nice. Thank you for this

abdelrahman seada • Jul 16

thanks 🤍😌

I like this.

abdelrahman seada • Jul 17

thanks 🤍

ngocleDevMobile • Jul 17

Greate!!!!!

abdelrahman seada • Jul 17

thanks 😌

Gabriele Zizzari • Sep 7

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

abdelrahman seada • Sep 9

happy to hear that 💕