title: How to render a component, that contains an opened and not closed tag? React.js
body: <p>I have an objective to make a component, that renders cards with nested ul tags like this: 
  <img src="https://i.imgur.com/5Kmkrdg.png" alt="needed">
  from data like this, that's being passed down with props from a parental component:
  <img src="https://i.imgur.com/51JMqgZ.png" alt="data"></p>
  
  <p>For that I set markers at the end of the lines where the nested ul should start, e.g. ":" when the nested ul should open and "." when the nested ul should close. But to make this code work, I need to render <strong>opened, but not closed tags</strong>.</p>
  
  <pre><code>let inUl = false;
  &lt;div className="cardBody"&gt;
          {props.body.map((el, index) =&gt; {
            if(el.endsWith(":")){
              inUl = true;
              return &lt;li&gt;{el}&lt;ul&gt;
            } else if(inUl &amp;&amp; el.endsWith('.')){
              inUl = false;
              return &lt;li&gt;{el}&lt;/li&gt;&lt;/ul&gt;
            } else {
              return &lt;li&gt;{el}&lt;/li&gt;
            }
          })}
    &lt;/div&gt;
  </code></pre>
  
  <p>Any help will be greately appreciated, I've a close deadline, and right now I'm literally stuck on the last part of the project - this.</p>