Reactにおいてクリックイベントで要素の色を変更したい。

Question

前提

React.jsでクリックイベントによって要素の色を変更する方法をご教示いただけないでしょうか。
下記はデモです。

デモ

デモではボタンを押すことで、背景の色が切り替わります。

実現したいこと

背景ではなく、ボタンの下にあるボックスの色を切り替えたいです。

現状は

document.body.style.background = "black";

と記述しており、bodyの部分をobjectに置き換えられるとボックスの色が変更できるかと思いますが、

const object = document.getElementById('ボックス');

と記述すると、下記のエラーが表示されます。

オブジェクトは 'null' である可能性があります。

なぜ上記のエラーが出るかについては、「レンダー前なので要素は仮想DOMにしかなく実DOMにはまだ要素が無いため」という認識でおります。

ソースコード

function App() {
  const [changed, setChanged] = useState(false);

  const changeColor = () => {
    if (changed === false) {
      document.body.style.background = "black";
      setChanged(true);
      return;
    }
    document.body.style.background = "";
    setChanged(false);
  };

  return (
    <>
      <button onClick={changeColor}>ボックスの色を変更</button>
      <hr />
      <Div />
    </>
  );
}

const Div = styled.div`
  background: red;
  width: 100px;
  height: 100px;
`;

調べたこと

「react getelementbyid 代わり」や「react getelementsbyclassname 代替」などで検索したのですが、有効なページが見つけられませんでした。

Answer 1

styled-components使ってらっしゃるようなので以下のような感じでどうでしょうか。
単純にpropsを渡して三項演算子で切り替えているだけです。

// 省略
      <Div changed={changed} />
    </>
  );
}

const Div = styled.div`
  background: ${props => props.changed ? 'black' : 'red'};
  width: 100px;
  height: 100px;
`;

Answer 2

JSXって小文字大文字どちらでもいいんですか？

const object = document.getElementById('ボックス');

だと思いますが

Comments

[TofuLove]

おっしゃる通りです。質問文中の修正します。

[kyoya0819]

質問者さんの動作しないコードはどっちですか？
最初のコードですか？私の回答のコードですか？

[TofuLove]

ご回答いただいたコードです。先の誤りのあった部分は質問文を作成する際に、外部サイトからdocument.getElementByIdの部分をコピペしたために誤った書き方になりました。質問文中のエラー文はキャメルケースで記述した場合で、VSCodeの問題タブに表示されたものです。