初めに
元医療職 → WEB制作者がReact開発で詰まった箇所を日々発信しています！
現在はJISOUというコミュニティに所属してReact開発を学習中。
今回Udemyの講座で、Chakra UIが提供している<Button>動作が正常に実装できなかったので、共有します。
ゴールとなるButton動作
今回実装したかったボタンはトップページにログイン画面を設置して、ログインする際にクリックするボタンです。
詳細は以下です。
- Json Placeholderからユーザー情報を取得
- inputに値を入力して、その値とJson Placeholderから取得したユーザー情報が一致すればログインできる
- inputに何も入力していなけれボタンをクリックできない仕様
間違っていたコード
< Button disabled={disabled} onClick={onClick} >{children}</ Button>
コードの説明
今回わかりやすくするためにCSSは省略しています。
このボタンは親コンポーネントから、propsとしてdisabled（全て波括弧内を指しています）を受け取っています。
他にもonClickやchildrenを受け取っていますが、今回は触れません。
親コンポーネントからpropsとしてdisabled（trueもしくはfalse）を受け取って、false（inputに何も入力されていない）であればボタンがクリックできない仕様です。
しかしこの記述では何も入力されていない状態でも、ボタンがクリックできてしまいます。
console.log(disabled)でdisabledがtrueとfalseの場合も確認しましたが、どちらの場合でもクリックできてしまう感じでした。
どうやらdisabledというプロパティが使えないようです...
解決策
以下のコードに書き換えると正常に動作します。
<Button isDisabled={disabled} onClick={onClick} >{children}</Button>
変わった箇所はdisabledをisDisabledに変えたことです。
以下の記事を参考にしたところ、disabledという記述はバージョンが古い時の記述らしく、現在Chakra UIが提供しているプロパティはisDisabledだそうです。
終わりに
React関連はバージョンアップがめっちゃ多いなと実感しています。
いくら動画講座も、バージョンアップによりサポートされていない記述をしている講座もあります。
ですが動画の通りにすんなりと進んでも、頭に入ってこないこともあるので、たまにはバージョンアップ問題で詰まるのもありだなとポジティブに考えています笑
実際に今回詰まったことで、エラーの箇所を探すなどして全体のコードの流れを掴むことができました。