Reactで真偽値の値によってテキストを変えたい

Question

前提・実現したいこと

ReactでuseStateを使って、学習用の簡易アプリケーションを作成しています。

チェック項目の真偽値の値によって、文字をinnerTextで変化させたかったのですが、エラーメッセージが発生しました。

発生している問題・エラーメッセージ

TypeError: Cannot set property 'innerText' of null

該当のソースコード

import React, {useState} from 'react';

const Article = ()=>{
  const [isPublished, togglePublished] = useState(false);

  {/* isPublishedじゃなく、別の書き方になるかと思いました */}
  if (isPublished){
    document.getElementById('booleanValue').innerText ='公開中';
  } else {
    document.getElementById('booleanValue').innerText ='非公開';
  }

  return(
    <div>
      <label htmlFor="check">公開状態</label>
      <input type="checkbox" id="check" checked={isPublished} onClick={()=>togglePublished(!isPublished) } />
      {/* 下記に公開か非公開かをif文で実施してみる */}
      <div id="booleanValue">公開か非公開かをここで表示させたい</div>
    </div>
  )
}
export default Article;

試したこと

useStateの変数名であるisPublishedをtrueかfalseかをあてはめてみましたが、エラーでした。
useStateで真偽値を利用して、真偽値の値次第で文字を変化させるにはどうすればいいか、自分なりにググってみたのですが、
答えに近づけず、つまりました。

補足情報（FW/ツールのバージョンなど）

├── react@17.0.1
├── react-dom@17.0.1
└── react-scripts@3.4.4

以上となります。
Reactの学習中で知識不足なところがあり、お気づきの方がいらっしゃいましたら
ご教授いただけますと幸いです。

最後までみていただきありがとうございます。

Answer 1

divタグ等が描画される前にdocument.getElementById('booleanValue')を参照しているためnullでエラーとなっています。

描画された後に実行されるようにuseEffectを使って以下のようにするとエラーは解消できますが、2つ目の例のように、React的にシンプルに書く方が良いです（innerTextによる書き換えをそもそもしない）。

const Article = ()=>{
  const [isPublished, togglePublished] = useState(false);

  useEffect(() => {
    if (isPublished){
      document.getElementById('booleanValue').innerText ='公開中';
    } else {
      document.getElementById('booleanValue').innerText ='非公開';
    }
  }, [isPublished])

  return(
    <div>
      <label htmlFor="check">公開状態</label>
      <input type="checkbox" id="check" checked={isPublished} onClick={()=>togglePublished(!isPublished) } />
      {/* 下記に公開か非公開かをif文で実施してみる */}
      <div id="booleanValue">公開か非公開かをここで表示させたい</div>
    </div>
  )
}

const Article = ()=>{
  const [isPublished, togglePublished] = useState(false);

  return(
    <div>
      <label htmlFor="check">公開状態</label>
      <input type="checkbox" id="check" checked={isPublished} onClick={()=>togglePublished(!isPublished) } />
      {/* 下記に公開か非公開かをif文で実施してみる */}
      <div id="booleanValue">{isPublished ? "公開" : "非公開"}</div>
    </div>
  )
}

Comments

[pontarou3]

nabenabe11234 さん
ご指摘ありがとうございます！
useEffectについての使い方、また実践的なご指摘についてもありがとうございます。
https://ja.reactjs.org/docs/hooks-effect.html

上記公式をみて理解しました。
チュートリアルのようなカウントするような事例には使えそうですね。
ただ、今回のような単純な処理の場合、おっしゃっていただいた後者のコードを書いたほうが、
一番シンプルで良いと思いました。

こんな書き方できるんだ！
っと実は驚いてます。（しょぼすぎてスミマセン）
めっちゃ参考になります！ありがとうございました。

Answer 2

JSXのなかで条件分岐するか、条件ごとに値を決めてJSXに埋め込んでください。

<div id="booleanValue">{ isPublished ? '公開中' : '非公開' }</div>

文字をinnerTextで変化させたかったのですが

よほどそれが必要な場面を除いて、Reactで生成した要素を通常のDOMで変更してはいけません。

Comments

[pontarou3]

maisumakun さん

ありがとうございます！根本的なところを間違ってましたね。。。。
今回の間違いで安易にDOM操作しないよう気をつけることができます。ありがとうございました。