Stop rendering conditions like this

we use conditions everywhere on our applications whether for state check or rendering some data into the view depending on some parameters. in this post will show some of how to render conditions in different way than using regular if(…) else {} bloc…


This content originally appeared on DEV Community and was authored by abdelrahman seada

we use conditions everywhere on our applications whether for state check or rendering some data into the view depending on some parameters. in this post will show some of how to render conditions in different way than using regular if(...) else {} blocks or even using ternary condition

for example (1)


type UserType = "admin" | "editor" | "user"

type User = { name : string ;  type : UserType }

const users : User[] = [
    {name : "john", type : "admin"},
    {name : "mike" , type : "editor"},
    {name : "abdelrahman" , type : "user"},
]

export default function Test() {

    const actions = ["create", "read", "update", "delete"]

    return (
        <div>
            {
                users.map(user =>{
                    return <div key={user.name} >
                            {/* we need to render actions depending on user type */}
                            <p>{user.name}</p>
                            <div className='flex items-center'>
                                user actions : 
                                { 
                                    user.type === "admin" && actions.map(a => <Action a={a} key={a} /> ) 
                                }
                                {
                                    user.type === "editor" && actions.filter(a => a !== "create").map(a => <Action a={a} key={a} />)
                                }
                                {
                                    user.type === "user" && actions.filter(a => a !== "create" && a !== "update" && a !== "delete").map(a => <Action a={a} key={a} />) 
                                }
                            </div>
                    </div>
                })
            }

        </div>
    )
}



function Action(props : {a : string}) {
  const {a} = props
  return (
    <p className='px-2  py-1  border-[1px] mx-2 rounded-md'  >{a}</p>
  )
}

output for example (1)

rendering using regular method

in this example we had to make a check condition for each user type to render his actions, as you can see this consumes a lot of code , harder to debug , harder to add more in future lastly looks ugly but this is a better way to do so

example (2)

type UserType = "admin" | "editor" | "user"

type User = { name : string ;  type : UserType }

const users : User[] = [
    {name : "john", type : "admin"},
    {name : "mike" , type : "editor"},
    {name : "abdelrahman" , type : "user"},
]

const userActionsStates : Record<UserType , string[] > = {
    admin: ["create", "read", "update", "delete"],
    editor: ["create", "read", "update"],
    user: ["read", "update"],
}

export default function Test() {


    return (
        <div>
            {
                users.map(user =>{
                    return <div key={user.name} >
                            {/* we need to render actions depending on user type */}
                            <p>{user.name}</p>
                            <div className='flex items-center'>
                                user actions : 
                                {
                                    userActionsStates[user.type].map(a => <Action key={a} a={a} />)
                                }
                            </div>
                    </div>
                })
            }

        </div>
    )
}

function Action(props : {a : string}) {
  const {a} = props
  return (
    <p className='px-2  py-1  border-[1px] mx-2 rounded-md'  >{a}</p>
  )
}

output for example (2)

  • output is the same as example (1)

key changes

grouping each user type in object key and value should be what ever you want to render
in this case we pass each user type actions like the following

grouping in objects

and here instead of rendering each condition like example (1) or making a ternary condition we get user actions from grouped object userActionsStates and just render whatever in the key's value and Voilà it's only one line of code

conditions using object

what about else ? what if we pass a user type that does not exists in the object ?

in this case we can add a default key in the object , this key will be used in false or undefined cases
like the following :


const userActionsStates : Record<UserType , string[] > = {
    admin: ["create", "read", "update", "delete"],
    editor: ["create", "read", "update"],
    user: ["read", "update"],
    default : ["read"]
}


if we updated users with new user that it's type is not defined like the last user object

updated users with new undefined user type

then we will make a small change to the render method

<div className='flex items-center'>
    user actions : 
    {
        (userActionsStates[user.type] ?? userActionsStates["default"]).map(a => <Action key={a} a={a} />)
    }
</div>

using null coalescing ?? we ensure that it will render as expected on
all conditions. :)

updated users output

please note

using this method you can render anything in the key's value string , number , array , Component , ...etc.

summary

  • easy to read , debug and update 🧑‍💻
  • looks cool 😌
  • less code

it's up to your creativity and imaginations 💡🔥


This content originally appeared on DEV Community and was authored by abdelrahman seada


Print Share Comment Cite Upload Translate Updates
APA

abdelrahman seada | Sciencx (2024-07-15T08:16:04+00:00) Stop rendering conditions like this. Retrieved from https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/

MLA
" » Stop rendering conditions like this." abdelrahman seada | Sciencx - Monday July 15, 2024, https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/
HARVARD
abdelrahman seada | Sciencx Monday July 15, 2024 » Stop rendering conditions like this., viewed ,<https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/>
VANCOUVER
abdelrahman seada | Sciencx - » Stop rendering conditions like this. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/
CHICAGO
" » Stop rendering conditions like this." abdelrahman seada | Sciencx - Accessed . https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/
IEEE
" » Stop rendering conditions like this." abdelrahman seada | Sciencx [Online]. Available: https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/. [Accessed: ]
rf:citation
» Stop rendering conditions like this | abdelrahman seada | Sciencx | https://www.scien.cx/2024/07/15/stop-rendering-conditions-like-this/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.