---
title: "Discussion on \"Clean conditional layouts in React\" | Hashnode"
description: "Discussion on \"Clean conditional layouts in React\". Making conditional sections of markup in React is usually achieved by breaking into code blocks with ternaries or logical operators. That can make a layout hard to follow at a glance. It might even prompt you to break components down to avoid adding ..."
url: "https://hashnode.com/posts/clean-conditional-layouts-in-react/5fa361cd86603914943d46ad"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Clean conditional layouts in React](https://nested.hashnode.dev/clean-conditional-layouts-in-react?utm_source=hashnode&utm_medium=feed)

Making conditional sections of markup in React is usually achieved by breaking into code blocks with ternaries or logical operators. That can make a layout hard to follow at a glance. It might even prompt you to break components down to avoid adding ...

Nov 5, 2020 · 1 min read · nested.hashnode.dev  
Read the article

-   [#typescript](https://hashnode.com/tag/typescript)
-   [#reactjs](https://hashnode.com/tag/reactjs)

## Written by

[Tim Kinnane](https://hashnode.com/@teeks)

@teeks · Melbourne, Australia

  
[View profile](https://hashnode.com/@teeks)

The human body is 70% side projects.

## Responses 2

Markdown supported · ⌘↵ to post

[Iva Kop](https://hashnode.com/@IvaKop)

[Nov 5, 2020](https://hashnode.com/posts/clean-conditional-layouts-in-react/5fa361cd86603914943d46ad/comment/5fa45dfe47631a19e811f61b)

I really like that approach! Thanks for sharing 🌟

[Tim Kinnane](https://hashnode.com/@teeks)

[Nov 5, 2020](https://hashnode.com/posts/clean-conditional-layouts-in-react/5fa361cd86603914943d46ad/comment/5fa45dfe47631a19e811f61b#reply-5fa463e43e634314b5179657)

Thanks Iva. I'm pretty happy with it too ☺️

[Darlan Tódero ten Caten](https://hashnode.com/@darlantc)

[Nov 5, 2020](https://hashnode.com/posts/clean-conditional-layouts-in-react/5fa361cd86603914943d46ad/comment/5fa3f79047631a19e811f091)

I see your point. Easy for a beginner in React to understand the Condition Component of course. Beautiful!

[Tim Kinnane](https://hashnode.com/@teeks)

[Nov 5, 2020](https://hashnode.com/posts/clean-conditional-layouts-in-react/5fa361cd86603914943d46ad/comment/5fa3f79047631a19e811f091#reply-5fa4642b3e634314b5179665)

Thanks Darlan 🙏