Discover the possibilities of implementing variable component titles in qwik!

My aim was to dynamically utilize either HTML <button> or <Link> from Qwik library based on the presence of the href prop. However, it seems that the link is not functioning as expected and clicking on it doesn't produce any result.

import { Slot, component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";

interface ButtonProps {
  href?: string;
}

export const Button = component$<ButtonProps>(({ href }) => {
  const Component = href ? Link : "button";

  return (
    <Component class="cursor-pointer select-none bg-blue-600 px-4 py-2 text-white">
      <Slot />
    </Component>
  );
});

Answer №1

Have you experimented with the conventional method?

const Button = createButtonComponent(({ href }) => {
  const Component = href ? Link : "button";

  if(href) {
    return(
        <Link className="cursor-pointer select-none bg-blue-600 px-4 py-2 text-white">
            <Slot />
        </Link>
    );
  } else {
    return(
        <button className="cursor-pointer select-none bg-blue-600 px-4 py-2 text-white">
            <Slot />
        </button>
    );
  }
});

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

Transforming the header of a table in a CSV file into a schema field

My task is to create a schema for a CSV file using Mongoose, but upon inspecting the file, I discovered it contains nearly a hundred fields or columns. While I am familiar with defining schemas in Mongoose for files with only a few fields, I am unsure ho ...

Ways to eliminate the absence of the 'Access-Control-Allow-Origin' header in an error message when using a Java-based web-service server

I'm currently working on developing a webservice using Java as the server and Javascript as the client. My goal is to send a Post request with JSON data and receive a Post response with JSON data from the server. However, since the client and server h ...

Analyzing JSON information and presenting findings within a table

Requesting user input to generate a JSON object based on their response. Interested in showcasing specific details from the object in a table format for user viewing. Questioning the efficiency and clarity of current approach. My current progress: In HTM ...

What is the process for making changes to a document in Mongoose?

My goal is to allow users to update existing mongoose documents using a form with method-override package. Despite trying various solutions found on Stackoverflow, I have not been able to resolve my issue. The desired functionality is for the user to view ...

all-encompassing ajax call method with jquery

Is there a universal function for calling ajax requests globally? For example, instead of writing the same code multiple times: $.ajax({ url: some_url_address, type: 'post', data: $('#form').serialize(), dataType: &apos ...

Removing a selected row from a data table using an HTTP request in Angular 2

I am working with a table that has data retrieved from the server. I need to delete a row by selecting the checkboxes and then clicking the delete button to remove it. Here is the code snippet: ...

Encountering a problem while verifying pattern using regular expressions

I'm facing an issue when manually checking if my inputs match the specified patterns. Below is the function I am using for this check: if (!$element.attr("pattern")) return true; let pattern = $element.attr("pattern"); le ...

Retrieve a single instance of every element within an array using JavaScript

I have an array of player objects, each containing properties such as "position" and "player_name". With 8 unique positions available for players, I aim to extract the first player for each position and transfer them to a new array. This way, the new array ...

Is it possible to add a vertical scrollbar to the vertical navigation pills on a Bootstrap

Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size? /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== */ .nav-pills-custom .nav-link { c ...

"Utilize Node to import either all dependencies or selectively choose specific

Should we only require the specific properties we need or the entire object? Example: Below is a snippet from my helper file 'use strict'; /** * getCallback * return a function used to make callback * @param {callback} callback - the callb ...

Getting AJAX to function on a local server with either XAMPP or node.js

I am completely stumped and in need of some assistance. My current challenge involves trying to implement AJAX on a local server, but I am feeling lost when it comes to even the most basic coding. I have installed node.js and XAMPP to my system and have b ...

Enhancing Form Validation with Jquery: SSN Pattern Matching, Input Masking, and Conditional Validation

Struggling with getting the Jquery Validation to cooperate with specific rules. The SSN field is masked with SSN format, and I need the validation to prevent submission unless it's a complete SSN. There's a regex function that rejects non-SSNs, ...

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

What is the functionality of Mongoose for handling multiple updates?

Array; arr=[ { id: [ '5e6e9b0668fcbc7bce2097ac', '5e6e9b0e68fcbc7bce2097af' ], color: [ 'a', 'b' ] } ] Models; const varyant = Models.varyant function; Promise.all( arr.map((item)=>{ return var ...

Tips for transmitting and utilizing information in ejs or jade with a node js server

I'm currently working on a project where I need to send data stored in localstorage from an ajax call to a node js server. The goal is to use the retrieved data to customize an html page using ejs or jade templates. I've attempted to send my data ...

Failure to trigger bind action in connector.php for elfinder, a Javascript file manager plugin

function log() { $data = array( 'folder_id' => 1, 'user_id' => 1 ); $this->Folder_model->share($data); } function access($attr, $path, $data, $volume) { return strpos(basename($path), '. ...

Transferring documents using JavaScript

I have been using the following method to upload files to my Laravel backend: setFile(id, e) { let self = this; let reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader. ...

Is there a way to determine if a website is utilizing javascript?

Currently, I am in the process of developing a web scraping tool using beautifulsoup. Some of the websites I am targeting contain JavaScript elements that prevent me from using urllib3 efficiently. As a workaround, I have incorporated selenium into my sc ...

Testing asynchronous functions with Mocha

Currently, I am in the process of developing a node wrapper to interface with an external api. One particular challenge I am facing is testing the asynchronous functionality of the createJob method. Provided below is the test case code: api_key = "test_0d ...

Error message: Trying to call the prepare() function on a null variable within the CRUD system

I have implemented a CRUD system on my website. The main page (avisos.php) displays a table with all the existing records. When a user clicks on the "ADD NEW RECORD" button, the following script is triggered: $("#btn-add").click(function(){ $(".co ...