React (IF) component for conditional rendering.

Have you bothered writing that conditional rendering syntax and getting that curly braces shape, therefore getting chaos and messy code?.

You will never ever use it again with this 1 line of code.

// (elseChildren = null) because you won't always have else
statement.
export default IF(condition, children, elseChildren = null) {
      return condition ? children : elseChildren
}

And then you can use it anywhere.

import IF from "./IF"

function mustSleep({time}) {
    return (
        <h1>
            <IF condition={time >= 9} 
                elseChildren={Write Code.}>
                Go Sleep!
             </IF>
        </h1>  
    )
}

export default mustSleep

Don't hesitate to add this component to your project
and be clean with your code!

I genuinely hope that helped you devs!.
Inspiring by this article: A React "if component"

Blog

Shortest & Usefullest React component you'll ever use

sajedsoliman

React (IF) component for conditional rendering.

Join Our Newsletter. No Spam, Only the good stuff.

Related