React & styled component

React & styled component

https://www.styled-components.com/#your-first-styled-component

tagged template literals

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

https://www.styled-components.com/docs/advanced#tagged-template-literals

let person = 'Mike';
let age = 28;

const myTag = (strings, personExp, ageExp) => {
    let str0 = strings[0]; // "That "
    let str1 = strings[1]; // " is a "
    // There is technically a string after
    // the final expression (in our example),
    // but it is empty (""), so disregard.
    // var str2 = strings[2];
    let ageStr;
    if (ageExp > 99) {
        ageStr = 'centenarian';
    } else {
        ageStr = 'youngster';
    }

    // We can even return a string built using a template literal
    return `${str0}${personExp}${str1}${ageStr}`;
}

let output = myTag`That ${person} is a ${age}`;

console.log(output);
// That Mike is a youngster