How to handle 3 different conditions in a React function component

Question

I am rendering out a lists of posts. There are 3 different types of content these posts will show. So the list view of all of these posts is the same. Standard title, thumbnail, author, etc. But when you go to the page of these 3 different types the content renders a different layout (different component). I have a simple ternary operator to set the different links for 2 of the link types. But now that I have 3 what is the best practice to setup that logic?

Here is what I have so far:

 <div className="all-posts">
                    { currentPosts?.map(post => (
                        <Link key={post.id} className="link-wrapper" to={post.course_trailer ? `course/${post.id}` : `/lesson/${post.id}`}> 
                            <div  className="post-container">
                                <div className="thumbnail-container">
                                 <img className="post-thumbnail" src={post.course_trailer ? post.featured_image : post.app_thumbnail} alt="" />
                                </div>
                                <div className="post-meta">
                                    <p className="post-title">{post.title}</p>
                                    <div className="author-meta">
                                        <div className="author-container">
                                            <p className="post-teacher">@{post.instructor_name}</p>
                                            <img className="verification-badge" src="#" alt="" />
                                        </div>
                                        <p className="post-views">Views: {post.views}</p>
                                    </div>
                                </div>
                            </div>           
                        </Link>
                    ))
                    }  
    </div>

You see in the Link I have the ternary. Now I need to setup the logic like if post.course_trailer go to this path if post.formulas then go to this path else go to the standard path.

You can have a nested tenary to add the third case. Refer to this link for example: https://stackoverflow.com/questions/10526739/a-somewhat-painful-triple-nested-ternary-operator — fatiu, Dec 11 '21 at 22:39
You don't have to use a ternary (although you can nest them like `foo ? "do foo" : (bar ? "do bar" : "do quux")`). Why not break it out into a function and turn the `if`-`else` you wrote in English into code? I'm not sure what "this path" and "standard path" mean so it's hard to write an answer other than "here's a generic nested ternary". — ggorlen, Dec 11 '21 at 22:40

score 2 · Answer 1 · answered Dec 11 '21 at 22:43

One way to solve this while remaining ternary-sanity (I like to call it that :D) is by extracting the logic into a function. Let's name it something like getLinkForPost. This function get's a post object passed as a parameter and returns the corresponding string.

const getLinkForPost(post) => {
   if(post.course_trailer) return 'path1';
   if(post.formulas) return 'path2';
   return 'default path';
}
...
//somewhere in render
<Link key={post.id} className="link-wrapper" to={getLinkForPost(post)}> 
...

score 1 · Answer 2 · answered Dec 11 '21 at 22:41

You can nest ternaries infinitely.

function component (){
    return (
        <div>
            {post.course_trailer
                ? `course/${post.id}`
                : post.formulas ? `/lesson/${post.id}` : `/standard`
            }
        </div>
    );
}

How to handle 3 different conditions in a React function component

2 Answers2