Leonardo-lavanda

Используйте дженерик параметры

export type ApiResponse<T> =
  | { errors: Array<{ [key: string]: string }> }
  | { data: Array<T> }
  | { text: string };

abstract class Api<T> {
  protected readonly baseUrl: string;
  protected readonly endPoint: string;

  protected get url(): string {
    return new URL(this.endPoint, this.baseUrl).toString();
  }

  protected constructor(baseUrl = '/', endPoint: string) {
    this.baseUrl = baseUrl;
    this.endPoint = endPoint;
  }

  protected async http({
    url = '',
    method = 'GET',
    data = undefined,
  }: RequestData): Promise<ApiResponse<T>> {
    try {
      const response: Response = await fetch(
        (new URL(url, this.url).toString()),
        { method, body: data }
      );
      return await response.json();
    } catch (e) {
      console.error(e.message);
      return { text: e.message };
    } finally {
      // finnally
    }
  }
}

class ApiPost extends Api<Post> {
  constructor(baseUrl: string, endPoint: string) {
    super(baseUrl, endPoint);
  }

  async list(count?: number): Promise<false | Array<Post>> {
    const response: ApiResponse = await this.http({
      url: `${count ? `?_limit=${count}` : ''}`,
    });

    if (Array.isArray(response))
      return response;

    return false;
  }
}

В ноде запускается простенький веб-сервер, который отдаёт реакт-приложение браузеру.
Реакт работает на клиенте, он никак не связан с нодой.

потому что реакт не исполняется в ноде (фс это модуль ноды), реакт собирает свой бандл используя ноду и модуль вебпак, далее это ванильный js скрипт и html + css и все. ноды там более никогда нет.

Любой Dom элемент является объектом в JavaScript и как любой объект в отличии от примитивного типа при клонировании лишь передает указатель клонируемого объекта в конечный объект. Поэтому при изменении клона изменяется и оригинал поэтому что они указывает на одно и тоже в памяти.

let original = {
item: 'a',
index: 1
}
let clone = original;  // Указатель у clone и original одинаковый
clone.item = 'b';
console.log(clone); // { item: 'b', index: 1 }
console.log(original);  // {item: 'b', index: 1}

Вместо этого лучше в ручную копировать объект

let clone = { ...original } // используем так называемый spread opeator

теперь у нас клон с другим указателем чем оригинал
Пример использования

Для начала надо понять что это не лепёшка а форма которая имеет аттрибуты которые можно анимировать в smil
Для использования этой не хитрой техники нужно сохранить несколько состояний элемента в поле values="" где их перечислить через ;

https://codepen.io/topicstarter/pen/QRWWoM