jsxでindexOfのエラーが出てしまいます（react）

Question

お世話になっております。

Reactで配列の要素のうち、特定のキーワードをデータが含む場合を絞る際に、
indexOf()を使おうと考えているのですがエラーが出てしまいます。

エラー

Cannot read property 'indexOf' of undefined

ソースコード

{
 todo.selectedWeeks.indexOf('monday') != false ?
  <Text>Todoがありません。</Text> :
  <Text>{todo}</Text>
}

JSX上で「〜を含む」でindexOf()以外の方法を使う必要があるのでしょうか。

Answer 1

エラー文を読む限り、selectedWeeksがundefinedになっているようなので、まずは、selectedWeeksに適切に値がセットされるように修正してみてください。

現状、console.log(todo.selectedWeeks)とすると、undefinedになるはずです。

以下、簡易的なコードでの現象再現。

// 1
const todo = {};
todo.selectedWeeks.indexOf('monday')
// => Uncaught TypeError: Cannot read property 'indexOf' of undefined

// 2
const todo = { selectedWeeks: undefined };
todo.selectedWeeks.indexOf('monday')
// => Uncaught TypeError: Cannot read property 'indexOf' of undefined

JSX上で「〜を含む」でindexOf()以外の方法を使う必要があるのでしょうか。

selectedWeeksが配列であると仮定するならば、Array.prototype.includes()が使えるので調べて見てください。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

なお、String.prototype.includes()も存在しているので、selectedWeeksが文字列の場合でもincludesは使えます。

Comments

[yamady]

Hayatoさん、具体的な回答をいただきまして誠にありがとうございます。
なるほど、おっしゃる通り適切な値が入っておらず、Array.prototype.includes()を使ってみることにします。

Answer 2

Array.prototype.includes() - JavaScript | MDN

selectedWeeks の型を提示しないと答えようありません。
あと jsx 云々は関係ないですね。

Comments

[yamady]

ありがとうございます。
いただいたリンクを参考に考え直してみます。