React inline conditional, create multiple elements in 1 condition

Newer to React, my apologies if this is simple.

I am trying to create a notes app in Cordova with React. Everything is working fine, but I'm having trouble inserting a break after a component inline. I know that I could break this into 2 divs and use css to style them, but I am curious how I would achieve this with 1 div and breaks.

So, what I am looking for

<div id=id key=key>Subject<br/><br/>Body</div>

React doesn't seem to like adding components like this. I can make it work if I use the condition twice:

render: function(){
    var data = this.props.data;
    return data.map(function(noteData){ 
                return <div id='note' key={noteData.id}>{noteData.subj.length > 0 ? noteData.subj: ''}{noteData.subj.length > 0 ? <br/>: ''} {noteData.body}</div>;
    });
}

It doesn't allow for something like:

return <div id='note' key={noteData.id}>{noteData.subj.length > 0 ? noteData.subj<br/><br/>: ''}{noteData.body}</div>;

It doesn't seem to allow for text (unless I'm doing something wrong)

"\n" or "<br/>", with or without brackets({"<br />"}) eg.

I'm sure it has to do with how React creates elements, but... is there a single-function solution here? What is the correct way of doing this?