Prop `id` did not match. Server: “react-select-17-live-region” Client: “react-select-3-live-region”の原因と対処法

プログラミング

React Selectを実装しようとしたらコンソールでProp id did not match.とエラーが出ていました。今回はその対処法をまとめていきます。

エラー内容

コード例（修正前）

import Select from 'react-select';
const options = [
  { value: 'p1', label: 'Top level - P1' },
  { value: 'p2', label: 'Mid level - P2' },
  { value: 'p3', label: 'Low level - P3' }
];
const Page = () => {
  return (
    <div>
      <h1>Selectbox</h1>
      <Select 
        options={options}
      />
    </div>
  )
}
export default Page;

参考記事をカスタマイズしたものですが、これでも同様のエラーがでるのではないかと思います。

エラー文

Warning: Prop `id` did not match. Server: "react-select-17-live-region" Client: "react-select-3-live-region"
    at span

原因としては、propsとして引き渡す際のidが合致していないこと？によるエラーのようです。Selectコンポーネントでidを渡す必要がありそうですね。

対処法

SelectコンポーネントにinstancedIdを付与することが解決することができました。参考記事にはidの付与も書かれていますが、instancedIdのみの付与で大丈夫でした。

コード例（修正後）

import Select from 'react-select';
const options = [
  { value: 'p1', label: 'Top level - P1' },
  { value: 'p2', label: 'Mid level - P2' },
  { value: 'p3', label: 'Low level - P3' }
];
const Page = () => {
  return (
    <div>
      <h1>Selectbox</h1>
      <Select 
        id="selectbox"
        instanceId="selectbox"
        options={options}
      />
    </div>
  )
}
export default Page;

まとめ

こうしたエラーは英語で調べればすぐ出てくるわけですが、日本語での検索結果も充実してきたら初心者の方にもとっつきやすくなって良いなと思います。こうした記事が少しでもお役に立てたら幸いです。

参考

react-select: How do I resolve “Warning: Prop id did not match”

ー　この記事をシェアする？　ー

  • Prop `id` did not match. Server: “react-select-17-live-region” Client: “react-select-3-live-region”の原因と対処法

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

  • someone より:
    2024.4.25 8:31 AM

    that’s funny. i wasn’t able to find any mention of this error in english. there were literally two sites in google search results, with your being in the first place. maybe i searched it wrong tho. but your solution really helped me, so thanks i guess. man i love technology.

    返信
  • Joshua Galit より:
    2023.5.21 8:46 PM

    Thank you for solving the problem

    返信
  • KZ より:
    2023.3.2 6:26 PM

    thank you very much

    返信
  • Gary from Paris より:
    2022.8.17 6:03 PM

    Merci beaucoup, je ne parle pas japonais, mais j’ai compris !
    Thank you so much, i don’t speak japonese , but i understand what to do !

    返信
  • Svyatoslav より:
    2022.6.16 8:23 PM

    Thank you, a lot!

    返信

Related / 関連記事