title: How generate dynamic DOM element in React
body: <p>I am getting a list of elements over the network. The list size might vary at each call. I have to show the list content in my React ant-design based site. How to generate this dynamic component ? What I did is,</p>
  <pre><code>export const myModal = props =&gt; {
  
  
  const contactArr = [];
  
  for(let i=1;i&lt;=props.contactList;i++){
      const eachRow = `&lt;Row style={{border : '1px solid red'}}&gt;
                          &lt;Col&gt;
                              &lt;Text&gt;Test&lt;Text&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;`
      contactArr.push(eachRow);
  }
  
  return (
      &lt;Modal
          visible={props.isVisible}
          width={'40%'}
          onCancel={props.handleEditModalCancel}
          footer={[
              &lt;Button key=&quot;back&quot; onClick={props.handleContactModalCancel}&gt;
                  Cancel
              &lt;/Button&gt;,
              &lt;Button key=&quot;submit&quot; type=&quot;primary&quot; onClick={props.contactModalConfirm}&gt;
                  {/*&lt;Button key=&quot;submit&quot; type=&quot;primary&quot; onClick={props.inputSubmit}&gt;*/}
                  Submit
              &lt;/Button&gt;
          ]}
      &gt;
          &lt;div&gt;
              {contactArr.join('')}
  
          &lt;/div&gt;
  
  
      &lt;/Modal&gt;
  );
  
  }
  </code></pre>
  <p>However, instead of rendered rows with columns I am getting simple string output such as,</p>
  <pre><code>&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;&lt;Row style={{border : '1px solid red'}}&gt; &lt;Col&gt; &lt;Text&gt;Test&lt;Text&gt; &lt;/Col&gt; &lt;/Row&gt;
  </code></pre>
  <p>How to get such a rendered output. Is my approach right as I know direct DOM manipulation is not good in React ? Do I need to add any key ?</p>
  <p>What is the best way to get my desired result ?</p>
  <p>Many thanks in advance.</p>