CODEWITHSUNDEEP
typescriptjsxstenciljs
Alex Merced
Alex Merced

Reputation: 150

StencilJS Props not populating in JSX

I've been learning and practicing Stencil JS and I'm creating a card component. I have several props that are meant to populate the card's content. While the card and its styling show up fine when I render the page the card does now show any of the props I passed through.

The Components code...

import { Component, Host, h, Prop } from '@stencil/core';

@Component({
  tag: 'proj-slider',
  styleUrl: 'proj-slider.css',
  shadow: true
})
export class ProjSlider {

    @Prop() cardImage: string;
    @Prop() title: string;
    @Prop() link1: string;
    @Prop() linkText1: string;
    @Prop() link2: string;
    @Prop() linkText2: string;


  render() {
    return (
        <div class="maincont">

              <div class="maintext">
                   <img src={this.cardImage}/><br/>
                   {this.title}
              </div>

              <div class="linkbox">

                   <div class="link"><a href={this.link1}>{this.linkText1}</a>
                   </div>
                   <div class="link"><a href={this.link2}>{this.linkText1}</a>
                   </div>

              </div>
        </div>

    );
  }

}

The Call to the Component in the JSX of another Component.

<proj-slider cardImage="https://i.imgur.com/NPV7bmk.png" title="Calculator" link1="alexmercedcoder.com" linkText1="git"
          link2="alexmercedcoder.com" linkText2="live"></proj-slider>

The code as it stands show the card and doesn't throw any errors but doesn't display the content from the props.

Upvotes: 2

Views: 2293

Answers (2)

Christian Meyer
Christian Meyer

Reputation: 1771

Your problem is that attributes in HTML doesn't have uppercase letters. So when you do prop variables with uppercase letters they won't be uppercase in HTML instead they are seperated by "-"

@Prop() cardImage: string;
@Prop() linkText1: string;
@Prop() linkText2: string;

These three are not cardImage, linkText1, linkText2 attributes in the HTML tag instead they are:

card-image, link-text1, link-text2

So your Tag would be:

<proj-slider card-image="https://i.imgur.com/NPV7bmk.png" title="Calculator" link1="alexmercedcoder.com" link-text1="git"
          link2="alexmercedcoder.com" link-text2="live"></proj-slider>

Update

Since the title tag lead to the error I want to add an example here how you can actually use the title tag anyway:

import { ..., Host } from '@stencil/core';

@Prop({reflect:true, mutable: true}) title:string;
private hostElement: HTMLElement;

render() {
    return (
      <Host ref={(el) => this.hostElement = el as HTMLElement}>
      YOUR HTML LIKE IT WAS BEFORE
      </Host>
    )
  }

componentDidUpdate(){
 if(this.hostElement)
   this.title = this.hostElement.getAttribute("title");
}

The Host tag is like the later rendered proj-slider tag. When you save it as a variable you can access the attributes that the tag has. Maybe you have to use a different lifecyclehook but the concept works. By the way the If depends on the hook you choose.

Upvotes: 10

Alex Merced
Alex Merced

Reputation: 150

What ended up fixing the problem was changing the title property as that was reserved word, after I did that it worked like a charm. I only referred to this tag in JSX of another element so I didn't need to change the casing otherwise (which I would do if I were calling it from the index.html)

Upvotes: 0

Related Questions