回答編集履歴

1 サンプルコードの追加

og24715

og24715 score 800

2018/07/11 02:00  投稿

以下の select コンポーネント中に出てくる `selectedItems.remove()` ってなんですか?
selectedItems はただの Array オブジェクトだと思うんですが、`.remove()` メソッドは初めて見ました。
```js
// select class
setItemStatus(clickItem) {
 ...
 if( selectedItems.indexOf(clickItem) >= 0) {
   selectedItems.remove(clickItem) // <- これ
 } else {
   selectedItems.push(clickItem)
 }
 ...
}
```
アイテムが選択されたことを表す chosen プロパティと selectedItems が state にいますが、役割被ってて冗長に感じますね。
選択されたアイテム数を表す count も冗長ですね。
state の count と selectedItems は提示のコードを見る限り使われていないので除去して構わないと想います。必要になれば以下の方法で取れるので。
```js
selectedItems = this.state.items.filter(item => item.chosen);
count = this.state.items.filter(item => item.chosen).length + 1;
```
無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。
無駄に複雑にしている気がするので上の問題をまずクリアしてみてください。
---
自分なら以下のようにします。解説が必要でしたらそのように言ってください。
[https://codepen.io/og24715/pen/VBwdEx?editors=0010](https://codepen.io/og24715/pen/VBwdEx?editors=0010)
```js
class Select extends React.Component {
 state = {
   items: [{
     id: 1,
     name: 'React',
     chosen: false,
   }, {
     id: 2,
     name: 'Redux',
     chosen: false,
   }]
 }
 _handleClick = id => event => {
   const items = [...this.state.items];
   const item = this.state.items.find(item => item.id === id);
   item.chosen = !item.chosen;
   this.setState({ items });
 };
 render() {
   return (
     <ItemList
       items={this.state.items}
       handleClick={this._handleClick}
     />
   )
 }
}
const ItemList = ({ items, handleClick }) => (
 items.map(item => (
   <Item
     key={item.id}
     item={item}
     handleClick={handleClick}
   />
 ))
);
const Item = ({ item, handleClick }) => (
 <button
   onClick={handleClick(item.id)}
 >
   {item.chosen && '✔ '}
   {item.name}
 </button>
);
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る