concat string in array ts

Arthur Prasniski 0
Viewed 61

I have a problem to solve. This problem is basically concat one value inside my array. But the problem is my array won't accept a value I will concat inside the array. Below is my code.

interface SpecialtiesListProps {
  specialtyId: number;
  rqe: string;
}

const [id, setId] = useState<SpecialtiesListProps[]>([]);
const [uf, setUf] = useState('');

const handleChange = (value: string, SpecialtyId: number) => {
    const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId);
    if (!newIdFilter) {
      setId([...id, {specialtyId: SpecialtyId, rqe: value}]);
    } else {
      setId(
        id.map((item) => {
          if (item.specialtyId === SpecialtyId) {
            return {specialtyId: Number(item.specialtyId), rqe: value};
          } else {
            return item;
          }
        }),
      );
    }   
      const newId = id.concat({uf})
      setId(newId) 
  };

The error that appears for me is this:

No overload matches this call.   Overload 1 of 2, '(...items:
ConcatArray<SpecialtiesListProps>[]): SpecialtiesListProps[]', gave
the following error.
    Argument of type '{ uf: string; }' is not assignable to parameter of type 'ConcatArray<SpecialtiesListProps>'.
      Object literal may only specify known properties, and 'uf' does not exist in type 'ConcatArray<SpecialtiesListProps>'.   Overload 2 of
2, '(...items: (SpecialtiesListProps |
ConcatArray<SpecialtiesListProps>)[]): SpecialtiesListProps[]', gave
the following error.
    Argument of type '{ uf: string; }' is not assignable to parameter of type 'SpecialtiesListProps | ConcatArray<SpecialtiesListProps>'.
      Object literal may only specify known properties, and 'uf' does not exist in type 'SpecialtiesListProps |
ConcatArray<SpecialtiesListProps>'.ts(2769)

I don`t know how to solve that and I spent many hours trying to solve that.

Below is a print of error to help:

here is a print of error

react-native reactjs typescript javascript
1 Answers

setId has type {specialtyId: number; rqe: string;} or in other words, type SpecialitiesListProps. On the other hand, uf has type string. string and SpecialitiesListProps aren't the same type, so TypeScript is throwing an error, because the id will not be type SpecialitiesListProps anymore if a type string is added to the array. You must either make uf type SpecialitiesListProps, or transform the uf string into a SpecialitiesListProps type. In addition, concat merges two arrays, so you need to pass in [{specialityId: number, rqe: string}] not an object like {string}

import { useState } from "react";
interface SpecialtiesListProps {
  specialtyId: number;
  rqe: string;
}

const [id, setId] = useState<SpecialtiesListProps[]>([]);
const [uf, setUf] = useState("");

const handleChange = (value: string, SpecialtyId: number) => {
  const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId);
  if (!newIdFilter) {
    setId([...id, { specialtyId: SpecialtyId, rqe: value }]);
  } else {
    setId(
      id.map((item) => {
        if (item.specialtyId === SpecialtyId) {
          return { specialtyId: Number(item.specialtyId), rqe: value };
        } else {
          return item;
        }
      })
    );
  }
  //this is an example change. modify this line for your use case
  const newId = id.concat([{ specialityId: 10, rqe: uf }]);
  setId(newId);
};
Arky Asmal0
Related