Use arrays:
let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
return [
<div key="date" className="date-line"><strong>{line.created_at}</strong></div>,
lineComponent,
];
} else {
return chat_line;
}
Or use fragments:
import createFragment from "react-addons-create-fragment";
let lineComponent = <Line key={line.client_id} line={line}/>;
if (line.created_at) {
return createFragment({
date: <div className="date-line"><strong>{line.created_at}</strong></div>,
lineComponent: lineComponent,
});
} else {
return chat_line;
}
In both cases, you have to provide keys for React. In case of array, you set key directly on element. Regarding fragments, you provide key:element pairs.
NOTE:
When returning from render method, you can only return single element, or NULL. Examples provided are invalid in that case.