Reactでループをする方法

Reactで以下のようなfor文を使おうとすると「Using ‘ForInStatement’ is not allowed. (no-restricted-syntax)」と怒られます。

const list = [];
const data = ['ほげ','ほげほげ'];
for (const i in data) {
      list.push(<Checkbox label={i} style={styles.checkbox} />);
}

以下のように書き換えます。

const list = [];
const data = ['ほげ','ほげほげ'];
Object.keys(data).forEach((key, index) => {
      list.push(<Checkbox label={data[key]} style={styles.checkbox} />);
});

書き方は以下を参考にしました。マジ英語圏の同士Thanks!

https://github.com/airbnb/javascript/issues/851

https://github.com/airbnb/javascript#iterators–nope

この辺は以下も参考になりそうです。

http://stackoverflow.com/questions/22876978/loop-inside-react-jsx

http://stackoverflow.com/questions/28320438/react-js-create-loop-through-array

ルールを外したい場合は

http://eslint.org/docs/rules/no-restricted-syntax

に書いてあるような書き方をする必要があるようです。