concat string in array ts

Question

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:

why are you calling setId twice inside the else statement ? — Olivier Boissé
– Olivier Boissé, Commented Sep 15, 2022 at 20:34
@OlivierBoissé i set this because i need change the id to this new with the concatenated string — Arthur Prasniski
– Arthur Prasniski, Commented Sep 15, 2022 at 21:08
@caTS thanks for your answear, when this cause this error ** No overload matches this call. Overload 1 of 2, '(...items: ConcatArray<SpecialtiesListProps>[]): SpecialtiesListProps[]', gave the following error. Type 'string' is not assignable to type 'SpecialtiesListProps'. Overload 2 of 2, '(...items: (SpecialtiesListProps | ConcatArray<SpecialtiesListProps>)[]): SpecialtiesListProps[]', gave the following error. Type 'string' is not assignable to type 'SpecialtiesListProps'.** you can help me whit this? — Arthur Prasniski
– Arthur Prasniski, Commented Sep 15, 2022 at 21:14

Heretic Monkey · Accepted Answer · 2022-09-15 22:20:14Z

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);
};

Collectives™ on Stack Overflow

concat string in array ts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related