If / else statement inside of React Component’s Render method

Sometimes (well, actually pretty often) you have to use conditional statements inside of React Component’s Render methods.

You could do it like this:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                {"LGK" == "awesome" ?
                    <h1>LGK is awesome!</h1>
                : 
                    <h1>LGK is not awesome :C</h1>
                }
            </div>
        );
    }
}

This works without any problem. But you always have to set the else part. But in many situations you only need the „if part“.
In this case, this way is much nicer:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                {"LGK" == "awesome" &&
                    <h1>LGK is awesome!</h1>
                }
            </div>
        );
    }
}

Node.js: Check if you are in debug or production mode

Sometimes you have to use other values in a variable when your application is in production as if when you are debugging it.
For example you have to use another web service URL.

Here is how can do it:

var webApiUrl;

if (process.env.NODE_ENV === "production") {
	// use in production
	webApiUrl = "http://myapp.online/awesome-app/api";
}
else {
	// use on debugging
	webApiUrl = "/api";
}

If you do it like me and use Webpack, you can start the debug mode with webpack -d and the production mode with webpack -p.

JS: Hide an element when clicking on somewhere else

Hint: I used the functions removeClass() and addClass() to make things easier. You can find them on

See the Pen Hide an element when clicking on somewhere else by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

JavaScript „hasClass()“, „addClass()“, „removeClass()“ helper functions

If you’re like me and come from jQuery to pure JavaScript, these helper functions might be very helpful for you:

function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className);
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else if (!hasClass(el, className)) 
        el.className += " " + className;
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else if (hasClass(el, className))
        el.className=el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
}

Regular expression collection

On this post I want to collect different regular expressions, that I used in my projects so I can find them very quick, when I need them in the future.
For more useful regular expressions you should check out this page:

Containing a string but not multiple others

See the Pen Regex example: Containing String but not multiple others by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.