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.
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)}>
...
You can nest ternaries infinitely.
function component (){
return (
<div>
{post.course_trailer
? `course/${post.id}`
: post.formulas ? `/lesson/${post.id}` : `/standard`
}
</div>
);
}