React + TypeScript | OnClickで指定タグのclass追加・削除 & checkboxの判定

Question

やりたい事

下記のように、jsxを使った場合の、OnClickで指定タグのclass追加・削除はできますが、
React + TypeScriptを使ってコンポーネントを作成する場合でも、同じように実装を行いたいのですが、いまいち分からず困っています。

Faq.js

import React from "react";

class Faq extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  toggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
        <div className="faq__container">
          <button onClick={this.toggle}>表示・非表示ボタン</button>
          <div className={this.state.open ? "open" : "hide"}>
              内容
          </div>
        </div>
    );
  }
}

export default FAQ;

FAQ.tsx

import React, { ReactNode } from 'react';

import s from './Faq.scss';

interface FaqProps {
  onClick: ;
  children: ReactNode;
  open: ;
}

export const Faq = ({ onClick, open,children }: FaqProps) => {
  return (
    <div className={s.faq__container}>
      <button onClick={onClick}>{question}</button>
      <div  className={s(open ? 'open' : 'hide')}>
        {children}
      </div>
    </div>
    );
  };
  

本当は、inputのcheckbox(checked)を使って、scssでスタイリングするのが楽な方法かと思いますが、
Reactでの、checkboxの記述の仕方が理解できていない為、断念しました。

一方的な質問になってしまい、恐縮ですが、助言の程よろしくお願いいたします。
もし可能であれば、checkbox(checked)の記述の仕方もご教授できれば、幸いです。

Comments

[hoshi-takanori]

JS か TS かは、型情報があるかないかの違いだけなので、TS でもクラスを使って書けますよ。
関数コンポーネントにする場合は、Hooks (useState) を使うと良いでしょう。

[kerry]

ありがとうございます！
なるほど、やってみます！

Answer 1

下記のようにして、無事解決しました。
hoshi-takanoriさん、ありがとうございました！

import React, { useState, ReactNode } from 'react';

import s from './FaqButton.scss';

interface FaqButtonProps {
  question: string;
  children: ReactNode;
}

export const FaqButton = ({ question, children }: FaqButtonProps) => {

  const [open, setContentState] = useState(false);

  return (
    <div className={s.faq__container}>
      <button onClick={() => setContentState(!open)} className={s.faq__question}>
        {question}
      </button>
      <div className={s.faq__answer}>
        <div  className={s(open ? 'open' : 'hide')}>
          {children}
        </div>
      </div>
    </div>
    );
  };