● （React jsx の if文）論理演算子&& を利用する

例2: isAdmin == true の場合に 私は管理者ですと表示します。

{isAdmin && <div>私は管理者です</div>}

例2: 未ログインの場合に class="hidden" とします。

className={! isLogin && 'hidden'}>

● （React の if文）三項演算子を利用する

<div>
    {isLogin
        ? 'ログイン済み'
        : '未ログイン'
    }
</div>

● （React の if文の入れ子）「三項演算子+論理演算子&&」を利用する

ログインしつつ、管理者の場合に「管理者です」を表示する

          {isLogin ? ( isAdmin && <div>管理者です</div> )
                : (null)
          }

● （React の for文）配列.map と 無名関数を利用する

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>

● jsx の中でオブジェクトのオブジェクトをループさせる

{Object.keys(myObject).map(k => {
  const v = myObject[k]
  return (
    <div> {v.name} </div>
  )
})}

● jsxの中で console.log を使用する

・1. 1行ずつ記述する

{console.log( 'hoge' )}
{console.log( 'fuga' )}

・2. 即時関数でまとめて記述する

{(function () {
	console.log('hoge')
	console.log('fuga')

	return null
})()}