title: Text in a React Fragment
body: <pre><code>render() {
    return (
      &lt;React.Fragment&gt;
        &lt;ChildA /&gt;
        &lt;ChildB /&gt;
        &lt;ChildC /&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  <p>Unlike this case, I have a whole list of Fragments which I have to return according to some situation in a for loop for conditional rendering. But For that I have to write certain String text inside &lt; /&gt;.
  I tried many ways but I am unable to do so.
  My loop is here:</p>
  <pre><code>for (let i = 0; i &lt; CONTENTS.length; i++) {
              if (CONTENTS[i].name === props.displaySubPlayArea) {
                  const name = CONTENTS[i].name;
                  return &lt;name /&gt;
              }
  };
  </code></pre>
  <p>It is returning <code>&lt;name&gt;&lt;/name&gt;</code> tags instead of text that name contains.
  Thanks In Advance</p>
  <p>Edited: For example</p>
  <pre><code>function apple() {
     return (//stuff1)
  }
  
  function banana() {
     return (//stuff2)
  }
  
  function pear() {
     return (//stuff3)
  }
  fruits = ['apple', 'banana', 'pear']
  fruits.map((fruit) =&gt; {
       return &lt;fruit /&gt;
  })
  </code></pre>
  <p>So outputs must not be :</p>
  <pre><code>&lt;apple&gt;&lt;/apple&gt;
  &lt;banana&gt;&lt;/banana&gt;
  &lt;pear&gt;&lt;/pear&gt;
  </code></pre>
  <p><strong>And outputs must be the contents there are in apple, banana and pear functional components</strong></p>
  <pre><code>//stuff1
  //stuff2
  //stuff3
  </code></pre>
  <p>and stuff can be any amount of data</p>