I want to use generic and got this error:

Type 'T' is not assignable to type 'ReactNode'.
  Type 'T' is not assignable to type 'ReactPortal'.ts(2322)
ModalSelect.tsx(17, 22): This type parameter might need an `extends React.ReactPortal` constraint.
ModalSelect.tsx(17, 22): This type parameter might need an `extends React.ReactNode` constraint.
index.d.ts(2379, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

here is my code:

export interface IModalSelect<T,E> {
  data: {
    id: number;
    name: string;
    data: {
      label: T;
      value: E;
    }[]
  }[];
  title: string;
  onClose: () => void;
}

the error comes at the line where the e.label is

function ModalSelect<T,E>({
  data,
  title,
  onClose
}: IModalSelect<T,E>) {
  const navigate = useNavigate();
  const axiosPrivate = useAxiosPrivate();
  return (
    <Modal containerClass="modal-condition mdh" onClose={onClose}>
      <h2>{title}</h2>

      {
        data.map((el) => {
          return (
            <div key={el.id}>
              <h3>Name: {el.name}</h3>
              <ul>
                {
                  el.data.map((e, i) => {
                    return (
                      <li key={i}>
                        <p>{e.label}</p>
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          )
        })
      }
    </Modal>
  )
}

What I am doing wrong ?

I have some queries where label and value can be a string and sometimes it can be a number.

I want to use generic and got this error:

Type 'T' is not assignable to type 'ReactNode'.
  Type 'T' is not assignable to type 'ReactPortal'.ts(2322)
ModalSelect.tsx(17, 22): This type parameter might need an `extends React.ReactPortal` constraint.
ModalSelect.tsx(17, 22): This type parameter might need an `extends React.ReactNode` constraint.
index.d.ts(2379, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

here is my code:

export interface IModalSelect<T,E> {
  data: {
    id: number;
    name: string;
    data: {
      label: T;
      value: E;
    }[]
  }[];
  title: string;
  onClose: () => void;
}

the error comes at the line where the e.label is

function ModalSelect<T,E>({
  data,
  title,
  onClose
}: IModalSelect<T,E>) {
  const navigate = useNavigate();
  const axiosPrivate = useAxiosPrivate();
  return (
    <Modal containerClass="modal-condition mdh" onClose={onClose}>
      <h2>{title}</h2>

      {
        data.map((el) => {
          return (
            <div key={el.id}>
              <h3>Name: {el.name}</h3>
              <ul>
                {
                  el.data.map((e, i) => {
                    return (
                      <li key={i}>
                        <p>{e.label}</p>
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          )
        })
      }
    </Modal>
  )
}

What I am doing wrong ?

I have some queries where label and value can be a string and sometimes it can be a number.

• reactjs
• typescript

1 Answer 1

What I am doing wrong ?

You need some constraints on T. Currently it can be anything.

You could replace it with the non-generic type ReactNode, which is the union of all the types that you can output in JSX.

Alternatively, if you know it is always going to be string or number, you can constrain it to those.

export interface IModalSelect {
  data: {
    id: number;
    name: string;
    data: {
      label: string | number;
      value: string | number;
    }[]
  }[];
  title: string;
  onClose: () => void;
}