[React]10文字以下のバリデーションが効かない/defaultValueが効かない

Question

前提・実現したいこと

Reactでテキストフィールドの文字列をバリデーションしたいと考えています。
ただ、10文字以上で保存ボタンをクリックできるようにしたいのですが、10文字ちょうどだとfalseの方になってしまいます。
また、defaultValueでテキストフィールドのテキストを管理しているのですが、保存時に''で初期化されず、そのままになってしまいす。
改善点がわかる方がいましたらコメントお願いします。

該当のソースコード

const [message, setMessage] = React.useState(''); 

const handleValidation = (e) => {
    setMessage(e.target.value);
  
    if (message.length < 10) { //10文字がこっちに入ってしまう
      setValidated(false);
    } else {
      setValidated(true);
      return;
    }
  };

const handleSubmit = () => {
    console.log(message);
    
　　// ローカルストレージに保存

    setMessage(''); //これが効かない。保存をクリックしてもメッセージが書かれたまま
  }

const button = validated ? (
    <Button onClick={handleSubmit} color="primary">
      保存
    </Button>
  ) : (
    <Button disabled color="primary">
        保存
    </Button>
  );

return (
...
<TextField
              id="outlined-multiline-static"
              label="Message"
              multiline
              rows={4}
              variant="outlined"
              onChange={handleValidation}
              defaultValue={message}
            />

Answer 1

コード全体を見ないと何ともいえないところもありますが、とりあえず、以下のように修正してみるといかがでしょうか？

const handleValidation = (e) => {
    setMessage(e.target.value);

-   if (message.length < 10) { //10文字がこっちに入ってしまう
+   if (e.target.value.length < 10) {
      setValidated(false);
    } else {
      setValidated(true);      
      return;
    }
  };

Comments

[aiai8976]

10文字で通るようになりました！ありがとうございます。
直前でmessageに入れているにも関わらず、e.target.value.lengthとの違いは何なのでしょうか。
また、defaultValue問題については改善点が見つかりますか？

[jun68ykt]

コメントありがとうございます。

> 直前でmessageに入れているにも関わらず、e.target.value.lengthとの違いは何なのでしょうか。

> 直前でmessageに入れている
からといって、それがすぐに state に保持されている message に反映されるわけではないからです。なので、e.target.value　が 10文字で、setMessage(e.target.value); した直後の 行の message はまだ9文字以下なので意図通りにはならないです。

> defaultValue問題については改善点が見つかりますか？

以下のように、prop を defaultValue ではなく、単に value に修正すると、うまくいくのではと思います。

修正前　defaultValue={message}
修正後　value={message}

[aiai8976]

messageについてよくわかりました！

また、valueに直したところうまくいきました！
本当にありがとうございました。

[jun68ykt]

????????????