React.jsでチャットアプリを作成 メッセージを交互に出力

Question

前提・実現したいこと

React.jsを使ってチャットアプリを作っていました。

実現したいこと

メッセージを入力したら1回目は自分のメッセージが送信され、2回目は相手が送信する簡単な機能を作ろうと思っています。

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

交互にメッセージの出力をする機能にしたいのですが交互に出力することができません。

該当のソースコード

import React, { useState } from "react";
import './layout.css';


export const App = () => {
  let isMyself = true;
  

  const [todoText, setTodoText] = useState("");
  const onChangeTodo = (e) => setTodoText(e.target.value);

  const [inBoxLeft, setInBoxLeft] = useState(["aaa"]);

  const [inBoxRight, setInBoxRight] = useState(["iii"]);

  const onclickTodo = () => {
    if(isMyself){
       inputTextRight();
    } else{
       inputTextLeft();
    }
    return isMyself = !isMyself;
  }

  // const change = () => {
  //   isMyself = !isMyself; 
  //   console.log(isMyself)
  // }

 
  
  
  const inputTextLeft = () => {
    const newInBoxLeft = [...inBoxLeft,todoText];
    setInBoxLeft(newInBoxLeft);
  }

  const inputTextRight = () => {
    const newInBoxRight = [...inBoxRight, todoText];
    setInBoxRight(newInBoxRight);
  }




  return(
    <>
      <h1>チャットアプリ</h1>
      <div className="room">
        <ul className="boxLeft">
          {inBoxLeft.map((todo, index) => {
            return(
              <li key={todo}>
                <p>{todo}</p>
              </li>
            )
          })}
        </ul>
        <ul class="boxRight">
          {inBoxRight.map((todo, index) => {
            return(
              <li key={todo}>
                <p>{todo}</p>
              </li>
            )
          })}
        </ul>
      </div>
      
      <div>
        <input placeholder="メッセージを入力してください" value={todoText} onChange={onChangeTodo} />
        <div>
          <button id="btn" onClick={onclickTodo}>送信</button>
        </div>
      </div>
    </>
  )
}

試したこと

真偽を反転させる関数を作ったりしましたが、うまくいきませんでした。

Comments

[hoshi-takanori]

isMyself も state にする (useState を使う) と良いでしょう。

[yanatoritakuma]

回答ありがとうございます。
その発想がありませんでした笑
もう一度考えてみます！

Answer 1

React では、変化する値は state にする必要があるので、isMyself も useState で state にして、変更する場合は更新関数を呼び出すと良いでしょう。

-  let isMyself = true;
+  const [isMyself, setIsMyself] = useState(true);

-    return isMyself = !isMyself;
+    setIsMyself(!isMyself);

Comments

[yanatoritakuma]

親切に解説してくれてありがとうございました。
おかげさまで解決することができました。
変化する値はuseStateを意識して考えていきます！