質問: 'User1') { return ; } })()} ``` ですが現状何も表示されていません。 ドロップダウンでクリックした際に表示の切り替えの方法のアドバイスよろしくお願い致します。
回答: > > 条件分岐として、ドロップダウンメニューでUser1をクリックするとdataはUser1になるので > > ifによりが表示されると考えました。 > > > dataがばっちり固定値で書かれてるから駄目。 しかもrender発火する度にdataが新しく作られてるから一生変更されない。 お外に設置してReactのお作法使って注入するようにしないと駄目だね。 ``` let data = [{ value: 'User1', }, { value: 'User2', }, { value: 'User3', }]; ``` それに`data`は配列なんだから、`data.value`はundefinedでしょ。 `data.0.value`なら取れるけど、User1を持っているか否かはこれだと分からないね。 dataの箇所はとりあえずそのままにしておいて、 User1を持っているか否かのチェックを考えていこう。 dataはobjectの配列なので確認するならArray.prototype.someか何かを使う必要がありそうだね。 まぁ普通にdataをfor文で回しても行けると思うけど renderの中身はこんな感じになると思うよ。 ``` let data = [ {value: 'User1'}, {value: 'User2'}, {value: 'User3'} ]; let has = name => data.some(datum => datum.value === name); let users = []; if (has('User1') users.push(); if (has('User2') users.push(); return ( {users} ) ``` ゆくゆくはdataやhasは外出しすることになるし、 `users.push`してる所も外から注入してfor文で一気に片付けられるようにした方が良いだろうね。