ReactのJSXでJavaScript 式を入れ子にするとエラー

エラーになる例

{results.length > 0 &&
  <h2>検索結果</h2>
  {results.map(result =>
    <p>{result.text}</p>
  )}
}

3行目で Parsing error: Unexpected token, expected “}” というエラーが出る。

下記のように && の直後に div タグを追加し、その子要素として JavaScript 式を埋め込めばOK。

{results.length > 0 &&
  <div>
    <h2>検索結果</h2>
    {results.map(result =>
      <p>{result.text}</p>
    )}
  </div>
}