Enclose this within Stencil.js components

Is there a more efficient way to utilize a nested "this" in a Stencil.js component?

Currently, I find myself following this approach:

render() {
    let thisNested = this;

    return <Host>
        {this.images ?

          this.imagesArray.map(function (el) {
            return <img
              // @ts-ignore
              src={thisNested.imageSize ? thisNested.imageSize : el.url}/>
          }) : <slot/>}
      </div>
    </Host>;
  }

However, I keep repeating the process of creating a nested this variable as shown above.

Could someone suggest a more elegant solution for achieving what I require?

Answer №1

Consider using arrow functions:

display() {
    return <Host>
        {this.images ?
          
          this.filteredImageList.map((el) => (<img
              // @ts-ignore
              src={this.imageSize || el.url}/>
          )) : <slot/>}
      </div>
    </Host>;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on blending a background with three.js sprite image?

Currently, I am facing issues with blending sprites in three.js to load textures for points (originally a pointcloud). Unfortunately, the blending does not seem to work correctly. Below is the code snippet that I am using: this._renderer = new THREE.WebGL ...

Tag in HTML not being replaced

Within my HTML snippet, I have encountered some <br> tags <div id="reading-project"> <p>The next morning, as soon as the sun was up, they started on their way, and soon saw a beautiful green glow in the sky just before them."That must b ...

"The Promise in the AngularJS Karma test specification did not resolve and the .then() method was not invoked

An issue arises when attempting to perform AngularJS Karma Unit Testing on a service. The service includes a method like the one below: service.getIntersectingElements = function (element, elements) { var deferred = $q.defer(); var tolerance = 20 ...

ClickAwayListener is preventing the onClick event from being fired within a component that is nested

I am encountering an issue with the clickAwayListener feature of material-ui. It seems to be disabling the onClick event in one of the buttons on a nested component. Upon removing the ClickAwayListener, everything functions as expected. However, with it e ...

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

Leveraging Vue slots to display a component inside another component

I am currently working on creating a base modal component that can be re-used, utilizing slots to insert the modal content. The issue I am facing is that when the modal is triggered by clicking a button, it displays without any content present. How can I e ...

Common causes leading to my header component experiencing hydration errors in Next.js

I am currently developing a job portal and encountering an issue with user authentication using JWT in combination with local storage. The problem arises in my header component when the user is authenticated, and if the web page is reloaded, I receive a hy ...

What is the process of incorporating a Higher-Order-Component in React?

I've been working on setting up a Higher Order Component (HOC) in React to enable text selection detection for any Input component. However, I seem to be missing a key piece of the puzzle in putting it all together. Initially, I followed an article t ...

Accessing the session object within an Express middleware function is crucial for

This is my unique Express middleware setup: var app = express() .use(express.cookieParser()) .use(express.session({secret: 'HiddenSecret'})) .use(express.bodyParser()) .use(function displaySession(req, res, next) { consol ...

Performing a map or foreach function on an array of objects limited to the first 5 objects

I need to iterate through an array of objects, but I only want to loop through the first 5 objects and then stop. What is the most efficient way to achieve this? [ {"visibility": 10000,}, {"visibility": 10000,}, {"visibilit ...

Collaboratively accessing a shared constant in two separate JavaScript files

I am diving into the world of JavaScript and Node.js. I am currently experimenting with Puppeteer to extract the text value of a tag and store it in a constant variable. However, I am encountering difficulties when trying to integrate this value into my ...

The application experiences crashes when the tablet is rotated, happening while in the development stage

For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...

Submitting a nested JSON body in ASP MVC

I'm currently struggling to send a nested JSON body to an API, and I've tried a few different approaches without success. The JSON values are sourced from multiple models, making it quite complex for me to handle. Any assistance or guidance on th ...

What is causing the undefined value to appear?

I'm puzzled as to why the term "element" is coming up as undefined. Even after running debug, I couldn't pinpoint the cause of this issue. Does anyone have any insights on what might be going wrong here? Below is the snippet of my code: const ...

The FontLoader feature seems to be causing issues when integrated with Vuejs

While working on a Vue project with threejs, I encountered an error similar to the one described here. The issue arose when attempting to generate a text geometry despite confirming that the path to the typeface font is accurate and in json format. ...

What is the best way to save a large quantity of objects to a server using ajax and php?

Imagine a scenario where I have a page containing 100 objects, each around 700 bytes when converted to json format. When it comes to saving these objects to the php based controller, there are several options available to me. Option 1: For each object ( ...

Can we integrate the Node.js API into Meteor?

Being new to Meteor.js, I've been wondering if it's possible to utilize the node API in my project. I've hit a roadblock and haven't been able to find any information on this topic despite spending a significant amount of time researchi ...

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

I currently have the following NGINX configuration set up: events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root C:/test; index index.html; ...

AngularJS: Controller isn't being triggered

I'm encountering a peculiar issue with AngularJS where MainCtrl is not functioning at all. When I visit localhost/, it automatically redirects to localhost/#/ but the page remains blank. There are no error messages in the console, and I can confirm th ...