例2: isAdmin == true の場合に 私は管理者ですと表示します。
{isAdmin && <div>私は管理者です</div>}
例2: 未ログインの場合に class="hidden" とします。
className={! isLogin && 'hidden'}>
<div>
{isLogin
? 'ログイン済み'
: '未ログイン'
}
</div>
ログインしつつ、管理者の場合に「管理者です」を表示する
{isLogin ? ( isAdmin && <div>管理者です</div> )
: (null)
}
const data = [
{ text: "hogehoge" },
{ text: "fugafuga" }
];
<ul>
{data.map((v,i) => {
return <li>{v.text} {i}番目</li>;
})}
</ul>
i は 0から始まります
配列じゃないものが渡ってくる可能性がある場合は事前にチェックします
{Array.isArray( data ) &&
data.map((v,i) => {
return <li>{v.text} {i}番目</li>;
})
}
Missing "key" prop for element in iterator のアラートが出る場合はkeyを渡します
<ul>
{data.map((v) => {
return <li key={v.id}>{v.text}</li>;
})}
</ul>
また return と {} は省略できます。
<ul>
{data.map((v) =>
<li key={v.id}>{v.name}</li>
)}
</ul>
開発中に console.log を使用する場合は return と {} は残しておいた方が便利かもしれません。
<ul>
{data.map((v) => {
console.log( v.id );
return <li key={v.id}>{v.text}</li>;
})}
</ul>
{Object.keys(myObject).map(k => {
const v = myObject[k]
return (
<div> {v.name} </div>
)
})}
{console.log( 'hoge' )}
{console.log( 'fuga' )}
{(function () {
console.log('hoge')
console.log('fuga')
return null
})()}