DEV Community

Cover image for Shortest & Usefullest React component you'll ever use
sajedsoliman
sajedsoliman

Posted on

Shortest & Usefullest React component you'll ever use

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"

Top comments (0)