➕ Conditions

Author: Bunlong

docs/conditional-rendering-with-enum.md

@@ -0,0 +1,96 @@
+---
+id: conditional-rendering-with-enum
+sidebar_label: Conditional rendering with enum
+title: Conditional Rendering with Enum
+description: Conditional rendering with enum | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['conditional rendering with enum', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Conditional rendering with enum
+image: /img/reactpatterns-cover.png
+---
+
+In JavaScript an object can be used as an enum when the object is used as a map of key value pairs.
+
+```jsx
+const ENUM = {
+  a: '1',
+  b: '2',
+  c: '3',
+}
+```
+
+An enum is a great way to have multiple conditional renderings. Let's consider the notification component again, this time we can use the enum as inlined object.
+
+```jsx
+function Notification({ text, state }) {
+  return (
+    <div>
+      {{
+        info: <Info text={text} />,
+        warning: <Warning text={text} />,
+        error: <Error text={text} />,
+      }[state]}
+    </div>
+  )
+}
+```
+
+The state property key helps us to retrieve the value from the object. It is much more readable compared to the switch case operator.
+
+In this case we had to use an inlined object, because the values of the object depend on the `text` property. That would be my recommended way anyway. However, if it wouldn't depend on the text property, you could use an external static enum too.
+
+```jsx
+const NOTIFICATION_STATES = {
+  info: <Info />,
+  warning: <Warning />,
+  error: <Error />,
+}
+
+function Notification({ state }) {
+  return (
+    <div>
+      {NOTIFICATION_STATES[state]}
+    </div>
+  )
+}
+```
+
+Although we could use a function to retrieve the value, if we would depend on the `text` property.
+
+```jsx
+const getSpecificNotification = (text) => ({
+  info: <Info text={text} />,
+  warning: <Warning text={text} />,
+  error: <Error text={text} />,
+})
+
+function Notification({ state, text }) {
+  return (
+    <div>
+      {getSpecificNotification(text)[state]}
+    </div>
+  )
+}
+```
+
+After all, the enum approach in comparison to the switch case statement is more readable. Objects as enum open up plenty of options to have multiple conditional renderings. Consider this last example to see what is possible.
+
+```jsx
+function FooBarOrFooOrBar({ isFoo, isBar }) {
+  const key = `${isFoo}-${isBar}`
+  return (
+    <div>
+      {{
+        ['true-true']: <FooBar />,
+        ['true-false']: <Foo />,
+        ['false-true']: <Bar />,
+        ['false-false']: null,
+      }[key]}
+    </div>
+  )
+}
+
+FooBarOrFooOrBar.propTypes = {
+  isFoo: React.PropTypes.boolean.isRequired,
+  isBar: React.PropTypes.boolean.isRequired,
+}
+```

docs/external-templating-component.md

@@ -0,0 +1,24 @@
+---
+id: conditional-rendering-with-enum
+sidebar_label: Conditional rendering with enum
+title: Conditional Rendering with Enum
+description: Conditional rendering with enum | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['conditional rendering with enum', 'child component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Conditional rendering with enum
+image: /img/reactpatterns-cover.png
+---
+
+Last but not least there exist external solutions to deal with conditional renderings. They add control components to enable conditional renderings without JavaScript in JSX. Then it is not question anymore on how to use if else in React.
+
+```jsx
+<Choose>
+  <When condition={isLoading}>
+    <div><p>Loading...</p></div>
+  </When>
+  <Otherwise>
+    <div>{list.map(item => <ListItem item={item} />)}</div>
+  </Otherwise>
+</Choose>
+```
+
+Some people use it, personally I wouldn’t recommend it, JSX allows you to use the powerful set of JavaScript functionalities to handle conditional rendering, there is no need to add templating components to enable conditional rendering, a lot of people consider React including JSX as their library of choice, because they can handle the rendering with pure HTML and JS in JSX.

docs/multi-level-conditional-rendering.md

@@ -0,0 +1,56 @@
+---
+id: multi-level-conditional-rendering
+sidebar_label: Multi-level conditional rendering
+title: Multi-level Conditional Rendering
+description: Multi-level conditional rendering, techniques, tips and tricks in development for Ract developer.
+keywords: ['multi-level conditional rendering', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Multi-level conditional rendering
+image: /img/reactpatterns-cover.png
+---
+
+What about nested conditional renderings? Let's have a look at the `List` component that can either show a list, an empty text or nothing.
+
+```jsx
+function List({ list }) {
+  const isNull = !list
+  const isEmpty = !isNull && !list.length
+
+  return (
+    <div>
+      { isNull
+          ? null
+          : ( isEmpty
+              ? <p>Sorry, the list is empty.</p>
+              : <div>{list.map(item => <ListItem item={item} />)}</div>
+            )
+      }
+    </div>
+  )
+}
+
+// usage
+<List list={null} /> // <div></div>
+<List list={[]} /> // <div><p>Sorry, the list is empty.</p></div>
+<List list={['a', 'b', 'c']} /> // <div><div>a</div><div>b</div><div>c</div><div>
+```
+
+It works, however I would recommend to keep the nested conditional renderings to a minimum, it makes it less readable, my recommendation would be to split it up into smaller components which themselves have conditional renderings.
+
+```jsx
+function List({ list }) {
+  const isList = list && list.length
+
+  return (
+    <div>
+      { isList
+          ? <div>{list.map(item => <ListItem item={item} />)}</div>
+          : <NoList isNull={!list} isEmpty={list && !list.length} />
+      }
+    </div>
+  )
+}
+
+function NoList({ isNull, isEmpty }) {
+  return (!isNull && isEmpty) && <p>Sorry, the list is empty.</p>
+}
+```

docs/with-higher-order-component.md

@@ -0,0 +1,34 @@
+---
+id: with-higher-order-component
+sidebar_label: With higher order component
+title: With Higher Order Component
+description: With higher order component | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['with higher order component', 'react ternary operation', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: With higher order component
+image: /img/reactpatterns-cover.png
+---
+
+Higher order component is a perfect match for conditional rendering in React. HOC can have multiple use cases. Yet one use case could be to alter the look of a component. To make the use case more specific, it could be to apply a conditional rendering for a component, let's have a look at a HOC that either shows a loading indicator or a desired component.
+
+```js
+// HOC declaration
+function withLoadingIndicator(Component) {
+  return function EnhancedComponent({ isLoading, ...props }) {
+    if (!isLoading) {
+      return <Component { ...props } />
+    }
+
+    return <div><p>Loading...</p></div>
+  }
+}
+
+// Usage
+const ListWithLoadingIndicator = withLoadingIndicator(List)
+
+<ListWithLoadingIndicator
+  isLoading={props.isLoading}
+  list={props.list}
+/>
+```
+
+In the example above, the `List` component can focus on rendering the list. It doesn't have to bother with a loading state. Ultimately you could add more HOC to shield away multiple conditional rendering edge cases.

sidebars.js

@@ -19,6 +19,10 @@ module.exports = {
           'ternary-operation',
           'logical-and-operator',
           'switch-case-operator',
+          'conditional-rendering-with-enum',
+          'multi-level-conditional-rendering',
+          'with-higher-order-component',
+          'external-templating-component',
         ],
       },
     ],