The parameter label is being detected as having an any type, as specified in the Binding element 'label'

Currently, I am referencing an example code snippet from react-hook-form. However, upon implementation, I encounter the following error:

(parameter) label: any
Binding element 'label' implicitly has an 'any' type.ts(7031)

The example code is as follows:

const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' },
    ];
    
    const MyInput = ({ label, name, onChange, onBlur, ref }) => {
      return (
        <>
          <label htmlFor={name}>{label}</label>
          <input
            name={name}
            placeholder="Jane"
            onChange={onChange}
            onBlur={onBlur}
            ref={ref}
          />
        </>
      );
    };

This leads to the same error message:

(parameter) label: any
Binding element 'label' implicitly has an 'any' type.ts(7031)

Even after assigning types, the error persists:

interface InputProps {
    label: string,
    name: string,
    onChange: any,
    onBlur: any,
    ref: any
}

  const MyInput = ({ label, name, onChange, onBlur, ref }):InputProps => {
    return (
      <>
        <label htmlFor={name}>{label}</label>
        <input
          name={name}
          placeholder="Jane"
          onChange={onChange}
          onBlur={onBlur}
          ref={ref}
        />
      </>
    );
  };
  

I'm currently working with Next.js, not sure if that affects anything?

Answer №1

It seems like the props were misplaced initially, but after some adjustments, the issue was resolved:

const MyInput = ({ label, name, onChange, onBlur, ref }: InputProps) => {
    return (
      <>
        <label htmlFor={name}>{label}</label>
        <input
          name={name}
          placeholder="Jane"
          onChange={onChange}
          onBlur={onBlur}
          ref={ref}
        />
      </>
    );
  };

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

How can you notice when a DOM element is deleted from the page?

I am in the process of creating a custom directive that will ensure only one element is active at a time. Directive: displayOneAtATime Description: This directive can be applied to a DOM node to guarantee that only one element with this directive can be v ...

When using Vue2, pushing a string to an array simply replaces the existing string instead of appending it

My current task involves manipulating a local data array by adding and removing strings within a method. However, I have noticed that my logic always results in the array containing only a single string passed to the updateIdArr method. Even after removin ...

Ways to conceal an item by considering the size of a different element

I have a question about displaying content within a div element. I want to show a "show more" button only if the content inside the div exceeds a max height of 530px. Otherwise, the button should remain hidden. Here is the code snippet I'm using: Ja ...

Creating an alert pop-up that displays text based on the prompt input type: A step-by-step guide

I'm a new to Javascript and I'm trying out some basic scripts. My objective is to display a prompt message (1.) asking for a name, then show an alert (2.) based on the input from the prompt. If the input is a valid name (a string), then the alert ...

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

The seamless integration of Next.js and Socket.IO enhances real-time

Hello, I hope you're having a great day! Currently, I'm diving into Socket.IO with the help of online tutorials. However, I've encountered a roadblock in my learning journey. The tutorial shows everything working fine, but when I try it out ...

.class selector malfunctioning

I'm currently developing a card game system where players can select a card by clicking on it and then choose where to place it. However, I've encountered an issue where nothing happens when the player clicks on the target place. Here is the li ...

Attempting to send numerous identifiers in an API request

I encountered a problem while working on a function in Angular that involves pulling data from an API. My goal is to enhance a current segment to accommodate multiple IDs, but I face difficulties when attempting to retrieve more than one ID for the API que ...

Arrange a collection of objects based on various nested properties

I am faced with the challenge of managing an array of objects representing different tasks, each categorized by primary and secondary categories. let tasks = [ { id: 1, name: 'Cleanup desk', primary_category: { id: 1, na ...

Partially extended texture in Three.js

Currently, I am using the Collada loader in Three.js r65 to load my 3D object. Upon loading, I apply a texture to all parts of the model using the following code snippet. var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader ...

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

I am looking to sort through the data based on the courseCode, but I can't seem to find a way to do it

Here is the JSON data after converting it with res.json() I attempted to filter it based on course code, let's say the code is: 301. I am confused about how to achieve this using JavaScript because of the nested structure. Here is the code snippet I ...

Count the occurrences of values in a JSON object using JavaScript

I'm dealing with a JSON array in vanilla JavaScript (no JQuery) and I've hit a roadblock. My task is to identify each unique value for 'Service' and calculate the frequency of each value. For example, if the value 100 appears 3 times ...

Problem encountered when utilizing the jQuery method .load()

Currently, there is an issue on my website where I am trying to load the content of a PHP file into a <div>. After ruling out any server-side problems, I have come to seek help with this question: Is there anything incorrect in the following code? & ...

The function WebForm_DoCallback is not recognized

Encountering an error where WebForm_DoCallback is undefined. UPDATE WebForm_DoCallback("AccountPageControl1", "FileSave~" + fileName, CVFileSavedServerResponse, null, null, true); function CVFileSavedServerResponse(param, context) { } Why isn't ...

"Learn how event bubbling in jQuery works with the use of .delegate() or .live() methods

After numerous attempts to simplify a code execution, I find myself struggling with loading DOM objects from the server using the .load() function. Specifically, I am encountering issues with implementing a datepicker plugin called jdpicker on an input tex ...

Show several fresh windows

Greetings everyone. Let me explain my current situation: I have a search page where users can select a product from a drop-down list, and upon clicking a button, a gridview is displayed showing the specifications of the selected product. What I'm a ...

Can regular JavaScript objects contain jQuery objects?

Lately, I've been working on optimizing the code for a carousel I built. One idea I'm toying with is organizing all my variables and functions into a JavaScript object to keep them separate from the rest of the code in the file (which happens to ...

Iterating through an SVG path multiple times

If I have the arrow below and I want to place it at various locations within the svg: <svg width="400" height="400"> <path transform="translate(150,100)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" /> <path transform="translate( ...