【React】【textarea】改行のみ、文字未入力の際に送信ボタンを無効化する

都内スタートアップでフロントエンドエンジニアとしてReactを書いております。
最近業務でチャット機能を実装する際、タイトルどおりの実装が必要だったのでメモ程度に残していきます。

全体イメージ

import React, {useState} from 'react';

const MessageForm = () => {
    const [message, setMessage] = useState('');
    const isExistTextInInput = !!message.match(/[^\n]/)
    const sendMessage = () => {
      if(!isExistTextInInput) return
      //inputの値を送信!!
    }
    return (
        <div>
            <textarea
             value={message}
             onChange={e => setMessage(e.target.velue)}
            />      
            <button 
              onClick={() => isExistTextInInput && sendMessage}
              className={isExistTextInInput ? 'btn' : 'btn--disable'}
            >
             送信
            </button>
        </div>   
    );
};

##解説
きもは下記変数です

const isExistTextInInput = !!message.match(/[^\n]/)

String.prototype.match()

正規表現全体に一致したすべての結果を配列で返します
何もないとnullになります

!!でboolに型変換

配列ならfrue, nullならfalseが返ります

###条件である[^\n]

• ^は、〜以外という正規表現
• \nは改行の正規表現

なので下記条件分岐になります。
改行以外の文字列がある　=> 配列が返る
文字列がない、改行しかない => nullが返る

##まとめ
あとはisExistTextInInputを使ってボタンのメゾット発火を無効にしたり、クラスを付け替えるだけです
めちゃめちゃ簡単なのでお試しあれ

キーボード操作系の
エンターシフトで送信や、","でタグを追加だったりも実装したので後にまとめようかなと思います！