The declarative approach of React makes writing user interfaces easier than ever. In this post, I will explain how to conditionally render things by using the component composition pattern.
\nA common way to conditionally render something in React is by using inline if with logical && operator:
const UserNotifications = props => (\n <div>\n <h2>Hi {props.userName}!</h2>\n {props.unreadNotifications > 0 && (\n <p>You have {props.unreadNotifications} notifications.</p>\n )}\n </div>\n);If you have to render either A or B depending on a conditional statement, the ternary conditional operator is often used:
const UserLogStatus = props => (\n <div>\n <h2>Welcome to morello.dev</h2>\n {props.loggedIn ? (\n <button onClick={props.onLogOutClicked}>Log Out</button>\n ) : (\n <button onClick={props.onLogInClicked}>Log In</button>\n )}\n </div>\n);The techniques seen above are perfectly legal in React, but we can use component composition to make conditional rendering more elegant and easier to read.
\nWe can use the component composition pattern to conditionally render parts of UI. Let’s see how!
\n\n\nFor a refresh on component composition pattern in React, see this post by Robin Wieruch.
\n
Every if-then-else code block consists of two parts: the logical condition that has to be evaluated and the components to be conditionally rendered.
\nWe can go further with this consideration by turning the if-then-else block into If, Then and Else components. We pass the condition as props to If, and we put Then and Else inside it. The Then component contains the stuff to render when the condition evaluates to true, and the Else component contains the stuff to render when the condition evaluates to false:
const UserLogStatus = props => (\n <If condition={props.loggedIn}>\n <Then>\n <button onClick={props.onLogOutClicked}>Log Out</button>\n </Then>\n <Else>\n <button onClick={props.onLogInClicked}>Log In</button>\n </Else>\n </If>\n);Everything sounds cool, but how could we implement the If, Then and Else components? Here is my solution, but feel free to submit yours in the comment area 💡
We start by considering the If component, as it is the parent. The idea is to take the condition passed as props, evaluate it and render the children of Then if the result is truthy, otherwise render the children of Else.
\n\nNote that, in order for this to work,
\nIfmust be the parent ofThenandElse. Violation of this constraint would make the code not working as expected.
Let’s see the code of the If component:
const If = props => {\n const thenComponent =\n 'length' in props.children\n ? props.children.find(child => child.type.name === 'Then')\n : props.children.type.name === 'Then'\n ? props.children\n : null;\n\n const elseComponent =\n 'length' in props.children\n ? props.children.find(child => child.type.name === 'Else')\n : props.children.type.name === 'Else'\n ? props.children\n : null;\n\n return props.condition ? thenComponent : elseComponent;\n};The component logic is quite simple: we evaluate props.condition and return Then or Else depending on the result of the evaluation (see the return statement).
Let’s focus on the assignment of thenComponent (the same considerations hold for elseComponent):
const thenComponent =\n 'length' in props.children\n ? props.children.find(child => child.type.name === 'Then')\n : props.children.type.name === 'Then'\n ? props.children\n : null;We first check if props.children is an array or an object by testing the presence of length property:
props.children is an array, we look for the child whose name is \"Then\", and we assign it to thenComponentprops.children is not an array, we check if it is an instance of Then, and we assign it to thenComponentIf both tests fail, we assign null to thenComponent (so nothing will be rendered).
Implementation of Then and Else component is the same. Let’s see the code for the Then component as a representative example:
const Then = props => props.children;This super-tricky function returns its children. Easy enough.
\nWe can pass just Then to If when we want to render something only if the condition is truthy:
<If condition={1 + 1 === 2}>\n <Then>1 plus 1 equals 2</Then>\n</If>This is equivalent to inline if with logical && operator, which is quicker to write but produces less readable code.
The same is valid for Else:
<If condition={myCondition}>\n <Else>myCondition is false</Else>\n</If>In this case, we could just negate the condition and change Else with Then:
<If condition={!myCondition}>\n <Then>myCondition is false</Then>\n</If>See the live demo on CodeSandbox.
","fields":{"slug":"/conditional-rendering-in-react/"},"frontmatter":{"title":"Conditional Rendering In React","date":"March 11, 2019","published_time":"2019-03-11","description":"A component composition-based approach to conditional rendering.","tags":["react","jsx","hooks","conditional rendering","component composition"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgAD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAcwkjKcf/8QAGhAAAwADAQAAAAAAAAAAAAAAAAECERITIv/aAAgBAQABBQJ1OfLnMGiNEc5P/8QAFhEAAwAAAAAAAAAAAAAAAAAAAAES/9oACAEDAQE/AbRaP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAEFAAAAAAAAAAAAAAAAABARICEycf/aAAgBAQAGPwKRZMZ//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERITFBUf/aAAgBAQABPyHK4HZXEt3wxTqgvmXbbWvpbw//2gAMAwEAAgADAAAAEIv/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QA//EABYRAAMAAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxCMjP/EAB0QAAIDAAIDAAAAAAAAAAAAAAERACExQVFhobH/2gAIAQEAAT8QOoEbJ3mj7EeD0R19QEoM1jpnzUHaKwthYoBEeYVm6q5//9k=","aspectRatio":2.3333333333333335,"src":"/static/8fa3a966c07e3f331073b7a1a5833c15/acf46/cover.jpg","srcSet":"/static/8fa3a966c07e3f331073b7a1a5833c15/74a6a/cover.jpg 350w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/047db/cover.jpg 700w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/acf46/cover.jpg 1400w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/dcb90/cover.jpg 1600w","srcWebp":"/static/8fa3a966c07e3f331073b7a1a5833c15/e6b98/cover.webp","srcSetWebp":"/static/8fa3a966c07e3f331073b7a1a5833c15/e5785/cover.webp 350w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/1b440/cover.webp 700w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/e6b98/cover.webp 1400w,\n/static/8fa3a966c07e3f331073b7a1a5833c15/702cd/cover.webp 1600w","sizes":"(max-width: 1400px) 100vw, 1400px","presentationWidth":1400,"originalImg":"/static/8fa3a966c07e3f331073b7a1a5833c15/dcb90/cover.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/conditional-rendering-in-react/","previous":{"fields":{"slug":"/work-in-progress/"},"frontmatter":{"title":"Work In Progress"}},"next":{"fields":{"slug":"/you-will-stop-using-localstorage/"},"frontmatter":{"title":"You Will Stop Using LocalStorage"}}}}}