{"id":3140,"date":"2023-05-19T06:28:57","date_gmt":"2023-05-19T06:28:57","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/component-visibility-in-react-with-conditional-rendering-and-guards\/"},"modified":"2026-03-05T10:47:23","modified_gmt":"2026-03-05T10:47:23","slug":"visibilite-conditionnelle-des-composants-dans-react","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/conditional-component-visibility-in-react\/","title":{"rendered":"Visibilit\u00e9 des composants dans React avec rendu conditionnel et protections"},"content":{"rendered":"\n

Today I would like to discuss how to control component visibility in React<\/a><\/strong>. But before we start there is small
disclaimer:<\/p>\n\n\n\n

Presented solution is not very secure in meaning of protecting your application against \u201ehackers\u201d (whoever there are).\nRemember that you need to protect your endpoints and to use good practices in application design. This solution only\nmakes your work a little easier.\n<\/code><\/pre>\n\n\n\n
Task, problem solution, or what we would like to achieve<\/h2>\n\n\n\n
One of the most common functionalities is to show component only for a bunch of users that have some specific rights,
roles or privileges. Common solution is to add some if<\/code>s to code<\/a>, manually check conditions and show or not elements.<\/p>\n\n\n\n
Let take a look to SimpleAppHeader<\/code> component that contains few navigation elements.<\/p>\n\n\n\n
<!-- wp:paragraph -->\n<p><code>typescript jsx<br>\nexport const SimpleAppHeader: FC = () =&gt; {<br>\n    return (<br>\n        &lt;header&gt;<br>\n            &lt;nav&gt;<br>\n                &lt;ul&gt;<br>\n                    {<br>\n                        currentUser.role === \"ADMIN\" &amp;&amp;<br>\n                        &lt;li&gt;Admin only component&lt;\/li&gt;<br>\n                    }<br>\n                    {<br>\n                        currentUser.role === \"USER\" &amp;&amp;<br>\n                        &lt;li&gt;User only component&lt;\/li&gt;<br>\n                    }<br>\n                    {<br>\n                        (currentUser.role === \"ADMIN\" || currentUser.role === \"USER\") &amp;&amp;<br>\n                        &lt;li&gt;Admin and User only component&lt;\/li&gt;<br>\n                    }<br>\n                    &lt;li&gt;General usage element&lt;\/li&gt;<br>\n                &lt;\/ul&gt;<br>\n            &lt;\/nav&gt;<br>\n        &lt;\/header&gt;<br>\n    )<br>\n}<br>\n<\/code><\/p>\n<!-- \/wp:paragraph -->\n\n<\/code><\/pre>\n\n\n\n
Looks \u201enot bad\u201d. Probably you could encapsulate checks into functions to reduce complexity. currentUser<\/code> is some object
that has role<\/code> property, but it could be anything that we would like to use as subject of our control mechanism.<\/p>\n\n\n\n
This code has some problems. If project<\/a> grows we probably use that constructions in many places. So we need to copy,
somehow, conditions. This code are hard to maintain and changing in a future. Specially when access rules change during
time e.g. we need to change currentUser<\/code> into something else. It is very hard to test. You need to write many tests
just to verify if your condition is ok.<\/p>\n\n\n\n
Simplification<\/h3>\n\n\n\n
Time to simplify this code a little. We could extract some methods and make code shorter and less complex:<\/p>\n\n\n\n
const isAdmin = (role: string): boolean => role === \"ADMIN\";\nconst isUser = (role: string): boolean => role === \"USER\";\nconst isAdminOrUser = (role: string): boolean => isAdmin(role) || isUser(role);\n\nexport const SimplifiedAppHeader: FC = () => {\nreturn (\n\n{\n\nisAdmin(currentUser.role) &&\nAdmin only component\n\n}\n{\nisUser(currentUser.role) &&\n\nUser only component\n\n}\n{\n(isAdminOrUser(currentUser.role)) &&\n\nAdmin and User only component\n\n}\n\nGeneral usage element\n\n)\n}\n```\n\n<\/code><\/pre>\n\n\n\n
Looks promising. We reduce noise od repeat lines. Code is more readable and easier to maintain. But take a look to
function isAdminOrUser<\/code>. We have only two roles. If we introduce third role we need to create another set of functions
that combines roles. Time to another version.<\/p>\n\n\n\n
Filtering<\/h3>\n\n\n\n
Let introduce function hasRole<\/code> that will be replacement for our isX<\/code> functions.<\/p>\n\n\n\n
const hasRole = (role: string, requiredRole: string[]): boolean => {\nlet found: string | undefined = requiredRole.find(s => role === s);\nreturn found !== undefined;\n}\n\nexport const FilteringAppHeader: FC = () => {\nreturn (\n\n{\n\nhasRole(currentUser.role, [\"ADMIN\"]) &&\nAdmin only component\n\n}\n{\nhasRole(currentUser.role, [\"USER\"]) &&\n\nUser only component\n\n}\n{\nhasRole(currentUser.role, [\"ADMIN\", \"USER\"]) &&\n\nAdmin and User only component\n\n}\n\nGeneral usage element\n\n)\n}\n```<\/code><\/pre>\n\n\n\n
Now looks good. We still have conditions in html part of code, but now we can test hasRole<\/code> function and trust that it
will be used with correct set of parameters. Adding or changing roles is now easier. We use array that contains all
roles that we need in place.<\/p>\n\n\n\n
However, this solution is bind to currentUser<\/code> object. Assumption is that object is somehow global or easy to access in
any place in application. So we can try to encapsulate this. Of course, we can move it to hasRole<\/code> function:<\/p>\n\n\n\n
 const hasRole = (requiredRole: string[]): boolean => {\n     let found: string | undefined = requiredRole.find(s => currentUser.role === s);\n     return found !== undefined;\n }<\/code><\/code><\/pre>\n\n\n\n
But that gives us<\/a> almost nothing.<\/p>\n\n\n\n
The Guard<\/code> Component<\/h2>\n\n\n\n
Time to create component that encapsulate whole logic. I named it Guard<\/code> and this is how I want to use it.<\/p>\n\n\n\n
 export const GuardedAppHeader: FC = () => {\n     return (\n         <header>\n             <nav>\n                 <ul>\n                     <Guard requiredRoles={[\"ADMIN\"]}>\n                         <li>Admin only component<\/li>\n                     <\/Guard>\n                     <Guard requiredRoles={[\"USER\"]}>\n                         <li>User only component<\/li>\n                     <\/Guard>\n                     <Guard requiredRoles={[\"USER\", \"ADMIN\"]}>\n                         <li>Admin and User component<\/li>\n                     <\/Guard>\n                     <li>General usage element<\/li>\n                 <\/ul>\n             <\/nav>\n         <\/header>\n     );\n }<\/code><\/code><\/code><\/pre>\n\n\n\n
Component need two properties. First children<\/code> responsible for content that is guarded. Second requiredRoles<\/code> that
handle array of roles that gives us access.<\/p>\n\n\n\n
We need representation of this struct. It is very simple. We extends type React.PropsWithChildren<\/code> that has children<\/code>
property. Of course you can manually add that property to your type and omit extension.<\/p>\n\n\n\n
interface IGuardProps extends React.PropsWithChildren {\nrequiredRoles: string[];\n}<\/code><\/pre>\n\n\n\n
Component itself is simple too. We will reuse hasRole<\/code> function here.<\/p>\n\n\n\n
export const Guard = (props: IGuardProps) => {\nconst hasRole = (requiredRole: string[]): boolean => {\nlet found: string | undefined = requiredRole.find(s => currentUser.role === s);\nreturn found !== undefined;\n}\n\nif (hasRole(props.requiredRoles)) {\n    return (\n        <>\n            {props.children}\n        <\/>\n    );\n} else {\n    return <><\/>;\n}\n}\n\u201c`<\/code><\/pre>\n\n\n\n
And I could say stop here, but it will be too easy. Now we have component, and we can use it to the extreme \ud83d\ude00<\/p>\n\n\n\n
`GuardService`<\/h3>\n\n\n\n
First step will be externalization of checks. currentUser<\/code> is hardcoded value. I would like to encapsulate this value
into some service, that will \u201eknow\u201d how to verify roles. Technically that means we move hasRole<\/code> function to another
class.<\/p>\n\n\n\n
I create simple interface IGuardService<\/code> that has only one property \u2013 hasRole<\/code>.<\/p>\n\n\n\n
export interface IGuardService {\ncheckRole: (roles: string[]) => boolean;\n}<\/code><\/pre>\n\n\n\n
Now simple implementation could look like this<\/p>\n\n\n\n
class SimpleGuard implements IGuardService {\ncheckRole(roles: string[]): boolean {\nlet found: string | undefined = roles.find(e => e === currentUser.role);\nreturn found !== undefined;\n}\n}<\/code><\/pre>\n\n\n\n
To use it we need to change IGuardProperties<\/code> and use case.<\/p>\n\n\n\n
export interface IGuardProps extends React.PropsWithChildren {\nrequiredRoles: string[];\nguardService: IGuardService;\n}\n\n\/\/ \u2026\n\nconst AppHeader: FC = () => {\nconst guardService = new SimpleGuard();\nreturn (\n\nAdmin only component\n \n\nUser only component\n\nAdmin and User component\n \n \n\nGeneral usage element\n\n \n\n);\n}\n```<\/code><\/pre>\n\n\n\n
Now component looks like:<\/p>\n\n\n\n
 export const Guard = (props: IGuardProps) => {\n     if (props.guardService.checkRole(props.requiredRoles)) {\n         return (\n             <>\n                 {props.children}\n             <\/>\n         );\n     } else {\n         return <><\/>;\n     }\n }\n <\/code><\/code><\/pre>\n\n\n\n
Much better. GuardService<\/code> separate us from logic that check roles. We can change it without consequences for our
component. Common use case is to use mock in tests and some \u201ereal\u201d implementation in production code.<\/p>\n\n\n\n
Forbidden element<\/h3>\n\n\n\n
Next improvement will be handling custom Forbidden<\/code> element. Current solution renders empty element. First we need to
change IGuardProps<\/code> adding function that will be rendered that element.<\/p>\n\n\n\n
 export interface IGuardProps extends React.PropsWithChildren {\n     requiredRoles: string[];\n     guardService: IGuardService;\n     forbidden?: () => React.ReactNode;\n }<\/code><\/code><\/pre>\n\n\n\n
This is optional property, name ends with question mark character. So it could be function or undefined<\/code>. We need to
handle it in Guard<\/code> component.<\/p>\n\n\n\n
export const Guard = (props: IGuardProps) => {\nif (props.guardService.checkRole(props.requiredRoles)) {\nreturn (\n<>\n{props.children}\n<\/>\n);\n} else if (props.forbidden === undefined) {\nreturn <><\/>;\n} else {\nreturn (<>\n{props.forbidden()}\n<\/>\n);\n}\n}\n\n\/\/ \u2026\n\nexport const AppHeader: FC = () => {\nconst guardService = new SimpleGuard();\nreturn (\n\nAdmin only component\n \n\nUser only component\n\nForbidden \u2013 only moderator can see this\n}>\n \n\nModerator component\n\n \n\nAdmin and User component\n \n \n\nGeneral usage element\n\n \n\n);\n}\n```<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Flexibility of types<\/h3>\n\n\n\n
Time to last big change. Current version component supports only roles as string<\/code>. We could have multiple different
types of property that we would like to check. Numbers or custom types is nothing special. I will add generics support.<\/p>\n\n\n\n
First step is changes in IGuardService<\/code> interface. Implementations will be depended on type of tested value. It could
be anything, so interface should handle it.<\/p>\n\n\n\n
 export interface IGuardService<ROLE> {\n     checkRole: (roles: ROLE[]) => boolean;\n }<\/code><\/code><\/pre>\n\n\n\n
Now it takes array of ROLE<\/code> generic type. Our simple implementation will change a little.<\/p>\n\n\n\n
 class SimpleGuard implements IGuardService<string> {\n     checkRole(roles: string[]): boolean {\n         let found: string | undefined = roles.find(e => e === currentUser.role);\n         return found !== undefined;\n     }\n }<\/code><\/code><\/pre>\n\n\n\n
We need to add type parameter, but we could prepare implementation that supports IRole<\/code> interface.<\/p>\n\n\n\n
interface IRole {\nname: string;\n}\n\n\/\/\u2026\nclass RoleGuardService implements IGuardService {\ncheckRole(roles: IRole[]): boolean {\nlet found: IRole | undefined = roles.find(e => e === userWithRole.role);\nreturn found !== undefined;\n}\n}\n```<\/code><\/pre>\n\n\n\n
Second step is to propagate this change to IGuardProps<\/code>.<\/p>\n\n\n\n
 interface IGuardProps<ROLE> extends React.PropsWithChildren {\n     requiredRoles: ROLE[];\n     guardService: IGuardService<ROLE>;\n     forbidden?: () => React.ReactNode;\n }<\/code><\/code><\/pre>\n\n\n\n
And respectively to Guard<\/code> component.<\/p>\n\n\n\n
export const Guard = <S, >(props: IGuardProps<S>) => {\n     if (props.guardService.checkRole(props.requiredRoles)) {\n         return (\n             <>\n                 {props.children}\n             <\/>\n         );\n     } else if (props.forbidden === undefined) {\n         return <><\/>;\n     } else {\n         return (<>\n                 {props.forbidden()}\n             <\/>\n         );\n     }\n }<\/code><\/pre>\n\n\n\n
And our use cases<\/p>\n\n\n\n
export const AppHeader: FC = () => {\n     const guardService = new SimpleGuard();\n     const roleService = new RoleGuardService();\n     return (\n         <header>\n             <nav>\n                 <ul>\n                     <Guard<IRole> requiredRoles={[{name: \"ADMIN\"}]} guardService={roleService}>\n                         <li>Admin only component<\/li>\n                     <\/Guard>\n                     <Guard<string> requiredRoles={[\"USER\"]} guardService={guardService}>\n                         <li>User only component<\/li>\n                     <\/Guard>\n                     <Guard<string> requiredRoles={[\"MODERATOR\"]} guardService={guardService}\n                                    forbidden={() => <div>Forbidden \u2013 only moderator can see this<\/div>}>\n                         <li>Moderator component<\/li>\n                     <\/Guard>\n                     <Guard<string> requiredRoles={[\"USER\", \"ADMIN\"]} guardService={guardService}>\n                         <li>Admin and User component<\/li>\n                     <\/Guard>\n                     <li>General usage element<\/li>\n                 <\/ul>\n             <\/nav>\n         <\/header>\n     );\n }<\/code><\/pre>\n\n\n\n
In this example I use both implementation of IGuardservice<\/code> just for illustrative purposes. In real use cases you
probably use only one.<\/p>\n\n\n\n
Specialized components and nesting<\/h3>\n\n\n\n
The Guard<\/code> could be nested. Just remember that access will be resolved in order from most external instance.<\/p>\n\n\n\n
export const NestAppHeader: FC = () => {\n     const guardService = new SimpleGuard();\n     return (\n         <header>\n             <nav>\n                 <ul>\n                     <Guard<string> requiredRoles={[\"USER\", \"ADMIN\"]} guardService={guardService}>\n                         <Guard<string> requiredRoles={[\"ADMIN\"]} guardService={guardService}>\n                             <li>Admin only component<\/li>\n                         <\/Guard>\n                         <Guard<string> requiredRoles={[\"USER\"]} guardService={guardService}>\n                             <li>User only component<\/li>\n                         <\/Guard>\n                         <li>Admin and User component<\/li>\n                         <Guard<string> requiredRoles={[\"MODERATOR\"]} guardService={guardService}\n                                        forbidden={() => <div>Forbidden \u2013 only moderator can see this<\/div>}>\n                             <li>Moderator component<\/li>\n                         <\/Guard>\n                     <\/Guard>\n                     <li>General usage element<\/li>\n                 <\/ul>\n             <\/nav>\n         <\/header>\n     );\n }<\/code><\/pre>\n\n\n\n
In above example Moderator component<\/code> could never appear, because user can handle only one role. First Guard<\/code> limits
roles to ADMIN<\/code> and USER<\/code>, so MODERATOR<\/code> will never pass first check.<\/p>\n\n\n\n
We can build specialized components that hide some properties.<\/p>\n\n\n\n
export const AdminGuard = (props: Omit<IGuardProps, \"requiredRoles\">) => {\nreturn <Guard requiredRoles={[\"ADMIN\"]} guardService={props.guardService} forbidden={props.forbidden}>\n{props.children}\n\n}\n\n\/\/\u2026\nexport const SpecializedAppHeader: FC = () => {\nconst guardService = new SimpleGuard();\nreturn (\n\nAdmin only component\n \n\n<Guard requiredRoles={[\"USER\"]} guardService={guardService}>\nUser only component\n\n<Guard requiredRoles={[\"MODERATOR\"]} guardService={guardService}\nforbidden={() =>\nForbidden \u2013 only moderator can see this\n}>\n\nModerator component\n\n<Guard requiredRoles={[\"USER\", \"ADMIN\"]} guardService={guardService}>\n\nAdmin and User component\n\n \n\nGeneral usage element\n\n);\n}\n```<\/code><\/pre>\n\n\n\n
In this case AdminGuard<\/code> predefine ADMIN<\/code> role. In consequences, we need to explicit define type of ROLE<\/code> type
parameter.<\/p>\n\n\n\n
Sum up<\/h2>\n\n\n\n
In this article I show you how to create and use Guard<\/code> component in React<\/strong>. We start from complex code that is hard to
read and maintain. We evolve it into more developer<\/a> friendly state and introduce custom functional component. Next we
extend component adding extra functionalities, refactor extracting service and finally add generics types.<\/p>\n\n\n\n
Finally, we have have component that could be nested is easy to test and maintain.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
D\u00e9couvrez comment simplifier et am\u00e9liorer la visibilit\u00e9 des composants dans React \u00e0 l'aide du rendu conditionnel et des composants de garde.<\/p>","protected":false},"author":2,"featured_media":3141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"\nComponent Visibility in React with Conditional Rendering and Guards - The Codest<\/title>\n<meta name=\"description\" content=\"Learn how to simplify and improve component visibility in React using conditional rendering and guard components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/fr\/blog\/visibilite-conditionnelle-des-composants-dans-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Component Visibility in React with Conditional Rendering and Guards\" \/>\n<meta property=\"og:description\" content=\"Learn how to simplify and improve component visibility in React using conditional rendering and guard components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/fr\/blog\/visibilite-conditionnelle-des-composants-dans-react\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T06:28:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T10:47:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Component Visibility in React with Conditional Rendering and Guards\",\"datePublished\":\"2023-05-19T06:28:57+00:00\",\"dateModified\":\"2026-03-05T10:47:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/\"},\"wordCount\":877,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/conditional-component-visibility-in-react.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/\",\"name\":\"Component Visibility in React with Conditional Rendering and Guards - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/conditional-component-visibility-in-react.png\",\"datePublished\":\"2023-05-19T06:28:57+00:00\",\"dateModified\":\"2026-03-05T10:47:23+00:00\",\"description\":\"Learn how to simplify and improve component visibility in React using conditional rendering and guard components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/conditional-component-visibility-in-react.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/conditional-component-visibility-in-react.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/conditional-component-visibility-in-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Component Visibility in React with Conditional Rendering and Guards\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/fr\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visibilit\u00e9 des composants dans React avec rendu conditionnel et protections - The Codest","description":"D\u00e9couvrez comment simplifier et am\u00e9liorer la visibilit\u00e9 des composants dans React \u00e0 l'aide du rendu conditionnel et des composants de garde.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/fr\/blog\/visibilite-conditionnelle-des-composants-dans-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Component Visibility in React with Conditional Rendering and Guards","og_description":"Learn how to simplify and improve component visibility in React using conditional rendering and guard components.","og_url":"https:\/\/thecodest.co\/fr\/blog\/visibilite-conditionnelle-des-composants-dans-react\/","og_site_name":"The Codest","article_published_time":"2023-05-19T06:28:57+00:00","article_modified_time":"2026-03-05T10:47:23+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Component Visibility in React with Conditional Rendering and Guards","datePublished":"2023-05-19T06:28:57+00:00","dateModified":"2026-03-05T10:47:23+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/"},"wordCount":877,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png","articleSection":["Software Development"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/","url":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/","name":"Visibilit\u00e9 des composants dans React avec rendu conditionnel et protections - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png","datePublished":"2023-05-19T06:28:57+00:00","dateModified":"2026-03-05T10:47:23+00:00","description":"D\u00e9couvrez comment simplifier et am\u00e9liorer la visibilit\u00e9 des composants dans React \u00e0 l'aide du rendu conditionnel et des composants de garde.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/conditional-component-visibility-in-react.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/conditional-component-visibility-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Component Visibility in React with Conditional Rendering and Guards"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/fr\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/comments?post=3140"}],"version-history":[{"count":22,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3140\/revisions"}],"predecessor-version":[{"id":8548,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/posts\/3140\/revisions\/8548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media\/3141"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/media?parent=3140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/categories?post=3140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/fr\/wp-json\/wp\/v2\/tags?post=3140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}