TypeError: is not a function with React, Typescript and Axios

Question

So, I searched for an existing solution, but I could find nothing, or maybe I'm not searching the correct way, thus, sorry if there's an existing thread about it.

In sum, it seems my code is not instantiating an object correctly as a class when it comes from an Axios call to the backend. So, when I call some function, I'm getting the error Uncaught TypeError TypeError: object.method is not a function.

Example:

First, basically, a parent component will call a service that will make a request to the backend. The result is then passed to a child component.

// imports
const Component: React.FC<ComponentProps> = () => {
  const { id } = useParams<{ id: string }>();
  const [object, setObject] = useState<Class>(new Class());
  
    useEffect(() => {
        (async () => {
            try {
                const object = await Service.getById(id);
                setObject(object);
            } catch (err) {
                //error handling
            } finally {
                cleanup();
            }
        })();

        return () => {
            // cleanup
        };
    });

  return  (
    <Container title={object.name}>
          <Child object={object} />
    </Container>
  );
};

export default Component;

Then, in child component, let's say I try to call a method that was defined in the Class, there I'm getting the not a function error:

// imports
interface Interface {
  object: Class;
}

const Child: React.FC<Interface> = ({ object }) => {

  object.callSomeFunction(); // error starts here

  return (
    <SomeJSXCode />
  );
};

export default Child;

Example of the Class code, I tried to write the method as a function, arrow function, and a getter, but none worked. Also, as a workaround, I've been defining a method to instantiate the object and set all properties, but I don't think that's a good long-term solution, and for classes with many properties, it gets huge:

export class Class {
  id: string = '';
  name: string = '';
  callSomeFunction = () => {
    // do something;
  }
  static from(object: Class): Class {
    const newInstance = new Class();
    newInstance.id = object.id;
    newInstance.name = object.name;
    // imagine doing this for a class with many attributes
    return newInstance;
  }
}

Finally, the Service code if necessary to better understand:

// imports

const URL = 'http://localhost:8000';

const baseConfig: AxiosRequestConfig = {
  baseURL: URL,
  headers: { 'Content-Type': 'application/json' },
  withCredentials: true,
};

export const backend = axios.create({
  ...baseConfig,
  baseURL: URL + '/someEndpoint',
});

export const Service = {
  async getById(id: string): Promise<Class> {
      try {
        const { data } = await backend.get<Class>(`/${id}`);
        return data;
      } catch (err) {
        throw new Error(err.response.data.message);
    }
  },
};

As I can't share the real code due to privacy, please let me know if this is enough or if more information is needed. Thanks in advance.

I thought it was some binding issue as here, but no.

Answer 1

So, I actually fixed this by updating the class validator in the back end, as the parsing was only necessary to parse the strings as number. But, by adding the annotation @Type(() => Number) to my dtos, I won't need to parse the strings anymore.