はじめに
Reactで引っかかった箇所を深掘りしたら、JavaScriptの基礎知識のなさであることに気がつきました。調べて試したことをまとめます。
結論
お急ぎの方のために結論から書きます。
タイトル通り、ドット記法ではプロパティ名に変数を指定するとundefinedになります。
ブラケット記法にすれば正しくプロパティの値を参照できます。
const person = {
firstname:'Taro',
lastname:'Yamada'
};
const hoge = "firstname";
console.log(person.hoge); // undefined
console.log(person[hoge]); // "Taro"
問題
ここからは、今回直面した問題について書いておきます。Reactのコードになります。
Reactチュートリアルのチャレンジ問題をやっていました。
propsとして受け取った変数nameを使い、ドット記法でオブジェクトのプロパティにアクセスしようとして、undefinedになってしまいました。
App.js
const drinks = {
tea:{
plant:'leaf',
caffeine:'15–70 mg/cup',
age:'4,000+ years'
},
// 省略
}
function Drink({ name }) {
const info = drinks.name;
console.log(info); // [[undefined]]
return (
// 省略
);
}
export default function DrinkList() {
return (
<div>
<Drink name="tea" />
<Drink name="coffee" />
</div>
);
}
解決方法
ブラケット記法だと正しく受け取れることがわかりました。
const info = drinks[name];