react，三元表达式里显示内容后如何换行？

代码如下：

return (
<div>
    {gender == '男' && [a, b, c, d].filter(item => item == '苹果' || item == '雪梨') ? '正确' + <br /> : null}
</div>
)

希望实现如下效果：显示’正确‘二字后马上换行
以上三元表达式能显示出’正确‘二字但没有换行，为解决此问题搜过一些方法，试过改成这样：

{gender == '男' && [a, b, c, d].filter(item => item == '苹果' || item == '雪梨') ? '正确\n' : null}

也试过改成这样：

{gender == '男' && [a, b, c, d].filter(item => item == '苹果' || item == '雪梨') ? <span style={{whiteSpace: 'pre-wrap'}}>正确</span> : null}

问题依旧。
也尝试过另一个方法，虽然能解决问题，但太浪费代码了，不希望使用此方法：

return (
<div>
    {gender == '男' && [a, b, c, d].filter(item => item == '苹果' || item == '雪梨') ? '正确' : null}
    {gender == '男' && [a, b, c, d].filter(item => item == '苹果' || item == '雪梨') ? <br /> : null}
</div>
)

请问有没有更好的方法解决问题？如何修改才能实现想要的效果？请在现有基础上展示代码进行说明，谢谢。

return (
  <div>
    {gender === '男' &&
      [a, b, c, d].filter(item => item === '苹果' || item === '雪梨').length > 0 ? (
        <span>
          正确
          <br />
        </span>
      ) : null}
  </div>
);