A step-by-step guide to resolving the 'Type is not assignable error' in Typescript when dealing with an array of elements

Question

A step-by-step guide to resolving the 'Type is not assignable error' in Typescript when dealing with an array of elements

Struggling to make this work, facing the same error repeatedly. Since I am still new to Typescript, a breakdown of what this error message signifies would be greatly appreciated:

const itemsRef = useRef<Array<HTMLLIElement | null>>([]);

...

<li
  ref={(el) => (itemsRef.current[index] = el)}
/li>

The error message reads as follows:

Type '(el: HTMLLIElement | null) => HTMLLIElement | null' is not assignable to type 'LegacyRef<HTMLLIElement> | undefined'.
  Type '(el: HTMLLIElement | null) => HTMLLIElement | null' is not assignable to type '(instance: HTMLLIElement | null) => void | (() => VoidOrUndefinedOnly)'.
    Type 'HTMLLIElement | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
      Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.

typescript

Answer 1

Answer №1

The error message you are encountering indicates that the function assigned to the `ref` prop does not match React's expected type. The `ref` should be a function returning `void` or a `RefObject`, but in this case, it returns `HTMLLIElement | null`, which is incompatible.

To resolve this issue, consider using a callback ref instead of directly assigning to the array.

import React, { useRef, useEffect } from 'react';

function YourComponent() {
 const itemsRef = useRef<Array<HTMLLIElement | null>>([]);

 useEffect(() => {
    // Initialize itemsRef.current if empty
    if (!itemsRef.current) {
      itemsRef.current = [];
    }
 }, []);

 const setRef = (el: HTMLLIElement | null, index: number) => {
    if (!itemsRef.current) {
      itemsRef.current = [];
    }
    itemsRef.current[index] = el;
 };

 return (
    <ul>
      {/* Example usage */}
      {Array.from({ length: 5 }).map((_, index) => (
        <li key={index} ref={(el) => setRef(el, index)}>
          Item {index + 1}
        </li>
      ))}
    </ul>
 );
}

Answer 2

The error message you are encountering indicates that the function assigned to the `ref` prop does not match React's expected type. The `ref` should be a function returning `void` or a `RefObject`, but in this case, it returns `HTMLLIElement | null`, which is incompatible.

To resolve this issue, consider using a callback ref instead of directly assigning to the array.

import React, { useRef, useEffect } from 'react';

function YourComponent() {
 const itemsRef = useRef<Array<HTMLLIElement | null>>([]);

 useEffect(() => {
    // Initialize itemsRef.current if empty
    if (!itemsRef.current) {
      itemsRef.current = [];
    }
 }, []);

 const setRef = (el: HTMLLIElement | null, index: number) => {
    if (!itemsRef.current) {
      itemsRef.current = [];
    }
    itemsRef.current[index] = el;
 };

 return (
    <ul>
      {/* Example usage */}
      {Array.from({ length: 5 }).map((_, index) => (
        <li key={index} ref={(el) => setRef(el, index)}>
          Item {index + 1}
        </li>
      ))}
    </ul>
 );
}

A step-by-step guide to resolving the 'Type is not assignable error' in Typescript when dealing with an array of elements

Answer №1

Similar questions

Type of Multiple TypeScript Variables

Palantir Forge: Enhancing Column Values with Typescript Functions

How can we avoid duplicating injectors in a child class when extending a class that already has injected services?

Ways to troubleshoot and resolve the npx create-next-app issue

Bringing PNGs and SVGs into React - Error TS2307: Module not found

Having difficulty passing a function as a parameter from a NextJS component

Connect values with formBuilder in Angular

Potential solution for communication issue between Angular CLI and Flask due to cross-origin error

What causes the object type to shift away from 'subscribe'?

Having difficulty transferring navigation props between screens using react-navigation

Retrieve the vertical distance of an element's top edge from the browser window

Disabling ESLint errors is not possible within a React environment

Appending or removing a row in the P-Table will result in updates to the JSON

Exploring Angular 5's BehaviourSubject for validating multiple email fields

Utilizing Async Storage for Language Localization

How to retrieve an image from a Spring RestController using Angular and store it in the

Having trouble integrating ColorThief with Angular, encountering issues with missing library methods?

Encountering build issues in my next.js application post updating to version 12.#.# and implementing Typescript

What is the best way to switch to a different screen in a React Native application?

In relation to the characteristics of an Angular Component (written in TypeScript) Class