2

I'm starting to work with SPFx and have the following code:

public render(): void {
SPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
var abc = (this.properties.showFb) ? styles.show: styles.hide;
this.domElement.innerHTML = `
<div class="${ styles.sizing } ">
  <a class="fab fa-facebook-square ${ styles.faCustom } ${ abc }" style="color: #40599A;" href="https://www.facebook.com">&nbsp;</a>
  <a class="fab fa-twitter ${ styles.faCustom }" style="color: #1DA1F2;" href="https://www.twitter.com">&nbsp;</a>
  <a class="fab fa-instagram ${ styles.faCustom } ${ styles.instagram }" style="" href="https://www.instagram.com"></a>
  ${escape(this.properties.description)}
</div>
`;
}

Is there a better way to handle this portion?

var abc = (this.properties.showFb) ? styles.show: styles.hide;
1

Thanks to theChrisKent for confirming that var abc = (this.properties.showFb) ? styles.show: styles.hide; is an acceptable way to handle showing/hiding pieces of my code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.