Is it allowed to add react-jsx code blocks with js?

Question

What I have is a simple render function with some conditions.

class AwesomeTestClass {
  constructor() { /* constructor stuff */ }
  reder() {
    let OUT = (<Text> basic text 1 </Text>);

    if (someCondition) {
      OUT += (<Text> add some condition text </Text>);
    } else {
      OUT += (<Text> add other condition text </Text>);
    }

    OUT += (<Text> end of awesome text </Text>);

    return (
      <View>
        {OUT}
      </View>
    );
  }
}

I try to accomplish the following output:

<View>
<Text> basic text 1 </Text>
<Text> add some condition text </Text>
<Text> end of awesome text </Text>
</View>

My error is as followed:

RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

So I wonder the following:

• Is there a way to use the += operator on react-jsx variables in js like js does with a string?
• Is there a way to use the + operator on react-jsx variables in js like js does with a string?

If not, is there a way:

• To cast from a String to JSX
• To cast from JSX to String

Following things I tried:

• Using JSX:

  // += visible at the top
  
  let OUT = (<Text>Awe</Text>);
  OUT = OUT + (<Text>some</Text>);
  

  Error output:

  RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

• Using Strings:

  let OUT = "<Text>Awe</Text>";
  OUT = OUT + "<Text>some</Text>";
  
  let OUT = "<Text>Awe</Text>";
  OUT += "<Text>some</Text>";
  

  Error output:

  RawText "<Text>Awe</Text><Text>some</Text>" must be wrapped in an explicit <Text> component.

• Using String Casting:

  let OUT = String(<Text>Awe</Text>);
  OUT = OUT + String(<Text>some</Text>);
  
  let OUT = String(<Text>Awe</Text>);
  OUT += String(<Text>some</Text>);
  

  Error output:

  RawText "[object Object][object Object]" must be wrapped in an explicit <Text> component.

• Using String Casting with String:

  let OUT = String(<Text>Awe</Text>);
  OUT = OUT + "<Text>some</Text>";
  
  let OUT = String(<Text>Awe</Text>);
  OUT += "<Text>some</Text>";
  

  Error output:

  RawText "[object Object]<Text>some</Text>" must be wrapped in an explicit <Text> component.

Why do I try?
Well I don not want to move each statement to a function.

Answer 1

You can push the components into an array and render that:

render() {
  let OUT = [(<Text key={1}> basic text 1 </Text>)];

  if (someCondition) {
    OUT.push(<Text key={2}> add some condition text </Text>);
  } else {
    OUT.push(<Text key={3}> add other condition text </Text>);
  }

  OUT.push(<Text key={4}> end of awesome text </Text>);

  return (
    <View>
      {OUT}
    </View>
  );
}

Note that I added a hardcoded key in this case. If you use a loop to render these items, you will need a key so react can distinguish each component if they are dynamically added or removed. Do not use the index as the key as it's an anti-pattern.