「&&」の意味

これは不完全な記事です。後ほどリライトすると思います。

&& : 「and」
|| :　「or」
なのですが、もっと別の方法で理解した方が使いやすいことに気づいたので、以下に記載します。

&& : 「左辺がtrueなら、右辺を実行する」
|| :

例えば、以下のコードを書いたとき、エラーが発生しました。

<div className='modal-right'>
	<p>ジャンル：{detail.genres.map(genre => genre.name).join(',')}</p>
</div>

detailもしくはdetail.genresが、「null」「undefined」だとエラーが出るようです。
以下のように書き換えることで、
detailがtrueなら、左辺を見る→detail.genresがtrueなら「detail.genres.map(genre => genre.name).join(',')」
となり、detailやdetail.genresがtrueの場合にのみdetail.genres.map~~が実行されるようになります。

<div className='modal-right'>
   <p>ジャンル：{{detail && datail.genres && detail.genres.map(genre => genre.name).join(',')}</p>
</div>