Эйч
Эйч
  • Все менторы
Задачи/Frontend-разработчик/Исправить код

Исправить код

Условие задачи

Произвести рефакторинг кода App.tsx

javascriptimport React, { useState } from "react";
import "./styles.css";
import Item from "./Item";

export default function App() {
  const [count, setCount] = useState(0);
  window.addEventListener("scroll", () => {
    const { scrollY } = window;
    if (scrollY > 100) {
      const topSection = document.querySelector<HTMLDivElement>(".top-section");
      if (topSection) {
        topSection.style.position = "absolute";
        topSection.style.top = scrollY + "px";
      } else {
        return;
      }
    } else {
      const topSection = document.querySelector<HTMLDivElement>(".top-section");
      if (topSection) {
        topSection.style.position = "static";
      } else {
        return;
      }
    }
  });

  return (
    <div className="App">
      <div className="block-wrapper">
        <div className="top-section">
          <button
            onClick={() => {
              alert(count);
            }}
          >
            Show count
          </button>
          <button
            onClick={() => {
              setCount(0);
            }}
          >
            Reset count
          </button>
        </div>
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
        <Item
          onAdd={() => {
            setCount(count + 1);
          }}
        />
      </div>
    </div>
  );
}

Item.tsx

javascriptimport React from "react";
import "./styles.css";

type Props = {
  onAdd: () => void;
};

export default function Item(props: Props) {
  return (
    <div className="block">
      <button className="btn" onClick={props.onAdd}>
        Add to cart
      </button>
    </div>
  );
}

Профессия

Frontend-разработчик

Сопроводим до оффера

Умножим шансы на каждом этапе поиска и поможем получить выгодный оффер

Узнать больше

Сервис развития карьеры

Контактыteam@h.careers@hcareers
TelegramVKYouTubeLinkedIn
Профессии
Компания
С чем помогаемОтзывыВопросы и ответыСертификатыВебинарыСтать ментором

Платформа принадлежит ООО "Эйч Карьера"
ИНН 9710095807 ОГРН 1227700077340
Адрес: 127006, город Москва, Старопименовский пер, д. 18 стр. 2, помещ./ком./этаж I/19/2

Copyright © 2020-2025 Сервис развития карьеры Эйч. Все права защищены.

Политика конфиденциальностиПользовательское соглашениеОферта