src/components/DifferencesSection.jsx - master - drndsv/react

src/components/DifferencesSection.jsx

62 строки2 KB

drndsv

Вторая часть разработки (разделяем все и делаем странички)

22 апр 2025, 14:31

22 апр 2025, 14:31982ef81

import Button from "./Button/Button";
import { useState } from "react";
import { differences } from "../data";

export default function DifferencesSection() {
  // useState (хуки) нельзя писать вне компонента
  // и он всегда должен находиться на верхнем уровне, т.е. например в if он не может находиться
  const [contentType, setContentType] = useState(null);

  // let content = "Нажми на кнопку";

  // console.log("App Component Render");

  function handleClick(type) {
    setContentType(type);
    // console.log(content);
    // content = type;
  }
  // let tabContent = null;
  // if (contentType) {
  //   tabContent = <p>{differences[contentType]}</p>;
  // } else {
  //   tabContent = <p>Нажми на кнопку</p>;
  // }
  return (
    <section>
      <h3>Чем мы отличаемся от других</h3>
      <Button
        isActive={contentType === "way"}
        onClick={() => handleClick("way")}
      >
        Подход
      </Button>
      <Button
        isActive={contentType === "easy"}
        onClick={() => handleClick("easy")}
      >
        Доступность
      </Button>
      <Button
        isActive={contentType === "program"}
        onClick={() => handleClick("program")}
      >
        Концентрация
      </Button>

      {/* {contentType ? (
          <p>{differences[contentType]}</p>
        ) : (
          <p>Нажми на кнопку</p>
        )} */}

      {/* {!contentType ? <p>Нажми на кнопку</p> : null}
        {contentType ? <p>{differences[contentType]}</p> : null} */}

      {!contentType && <p>Нажми на кнопку</p>}
      {contentType && <p>{differences[contentType]}</p>}

      {/* {tabContent} */}
    </section>
  );
}