How to concatenate two JSX fragment or variables or string and component (in Reactjs)?

Question

I know JSX can be very misleading because it looks like strings and it is not, thus the \"string\" term in the question, even if we are not really manipulating strings.

Answer 1

Use arrays:

let lineComponent = ;
if (line.created_at) {
  return [
    
{line.created_at}
,
    lineComponent,
  ];
} else {
  return chat_line;
}

Or use fragments:

import createFragment from "react-addons-create-fragment";

let lineComponent = ;
if (line.created_at) {
  return createFragment({
    date: 
{line.created_at}
,
    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.