A React "if component" (#snippet)

After using Vue and Angular.js (I used the first version of Angular when it came out) for many years, I have to say that I always enjoyed the simplicity of using v-if and ng-if to render child components conditionally.
Now I’m writi…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

After using Vue and Angular.js (I used the first version of Angular when it came out) for many years, I have to say that I always enjoyed the simplicity of using v-if and ng-if to render child components conditionally.

Now I'm writing React primarily and I'm bothered by the constant use of ternary operators when dealing with conditionally rendered components.

function SomeComponent({condition}) {
  return <div>
    { condition ? <span>Yes it is true!</span> : null }
  </div>
}

It's not a big deal, and there are many different ways to render boolean-dependent components (such as using &&), but I never really liked writing code like this and I don't think it's very readable.

Today I read 7 Ways of Achieving Conditional Rendering in React, and it included a handy snippet that I'll adopt from now on.

I can't say that I didn't consider abstracting the ternary operators away, but somehow I never took it into practice. Fernando Doglio's article now moved me over the line to adopt a nicer pattern. Say hi to the functional if component.

function IF({children, condition}) {
  if (condition) {
    // render children if the condition is truthy
    return children;
  }

  return null;
}

/**
 * Use the component as follows:
 *
 * <IF condition={condition}>
 *   <Greeter username={user.name} />
 * </IF>
 */

It's seven lines of code and this tiny component can be brought into any React project as a handy utility. Much better! Thank you Fernando!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-09T17:24:41+00:00) » A React "if component" (#snippet). Retrieved from https://www.scien.cx/2021/01/23/a-react-if-component-snippet/.
MLA
" » A React "if component" (#snippet)." Stefan Judis | Sciencx - Saturday January 23, 2021, https://www.scien.cx/2021/01/23/a-react-if-component-snippet/
HARVARD
Stefan Judis | Sciencx Saturday January 23, 2021 » A React "if component" (#snippet)., viewed 2022-12-09T17:24:41+00:00,<https://www.scien.cx/2021/01/23/a-react-if-component-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » A React "if component" (#snippet). [Internet]. [Accessed 2022-12-09T17:24:41+00:00]. Available from: https://www.scien.cx/2021/01/23/a-react-if-component-snippet/
CHICAGO
" » A React "if component" (#snippet)." Stefan Judis | Sciencx - Accessed 2022-12-09T17:24:41+00:00. https://www.scien.cx/2021/01/23/a-react-if-component-snippet/
IEEE
" » A React "if component" (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/01/23/a-react-if-component-snippet/. [Accessed: 2022-12-09T17:24:41+00:00]
rf:citation
» A React "if component" (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2021/01/23/a-react-if-component-snippet/ | 2022-12-09T17:24:41+00:00
https://github.com/addpipe/simple-recorderjs-demo