Type 'Element' is not assignable to type 'string'.ts(2322)

Question

I'm new react typescript developer, here i have a code which works in 'js' 'but when changed to 'tsx' getting error: Type 'Element' is not assignable to type 'string'.ts(2322) it is pointing to 'helperTextt' error (did not find answer else where) should i do : let helperTextt:any = ""; ?

any suggestions ?

let helperTextt = "";

if (event.target.id === "hostname") {
  if (!HOSTNAME_REGEX.test(event.target.value)) {
    helperTextt = (
      <Trans i18nKey="form.formData.hostNameError">
        Invalid Host name
      </Trans>
    );
    errorr = true;
  }
}

Ane

If you are assigning a React element(?) to helperTextt then you should type it as let helperTextt: React.Element (or whatever the concrete type is). – Tuner

@FelixKling i did like that and got : 'React' has no exported member named 'Element'. Did you mean 'CElement'?ts(2724) – Ane

Looks like ReactElement is exported as named export from the react package. – Tuner

so what i have to do ? – Ane

Answer 1

You could do

import { ReactElement } from "react";

and then

let helperTextt: ReactElement | null = null;

Multicolored

with that i'm getting : Type 'Element | Element[]' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'. Type 'Element[]' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, keyts(2322) – Ane

no help with this ? – Ane

Can you post where Trans is from, and can you also create a mvce and post it (you could use codesandbox.io) so we can test our suggestions. – Multicolored

that 'Trans' is imported from here : import { Trans } from "react-i18next"; – Ane

Answer 2

you can add type to your helperTextt variable

let helperTextt: JSX.Element = null;

Tiana

then i'm getting 'Type 'null' is not assignable to type 'Element'.ts(2322) ' – Ane

try to assign nothing then let helperTextt: JSX.Element; – Tiana

then in other place i get error : Variable 'helperTextt' is used before being assigned.ts(2454) – Ane

Answer 3

Typescript is automatically inferring helperTexttto be a string, if you are certain of its values you can get around this (although it is not preferred to declare type any) by declaring it as type any:

 let helperTextt:any;

Montiel

Answer 4

    let helperText: JSX.Element | string = "";

    if (event.target.id === "hostname") {
        if (!HOSTNAME_REGEX.test(event.target.value)) {
          helperText = (
            <Trans i18nKey="form.formData.hostNameError">
              Invalid Host name
            </Trans>
          );
          errorr = true;
        }
      }

Zurkow

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Allegorical

Answer 5

Maybe it's an issue related to the inferred type of a variable by Typescript itself, as in my case, I was using title as the name which was initially a string prop to a Component, but later declared it's type to ReactElement which gave this issue! Well, to fix this, I just renamed the prop from title to appTitle and that worked like magic!

Judgment