title: Table in ReactJS appearing twice
body: <p><a href="https://i.stack.imgur.com/lHKCU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lHKCU.png" alt="enter image description here" /></a></p>
  <p>I am trying to create a table in ReactJS and enter rows in it using API data. The columns are fixed. But somehow, two tables are appearing and data is getting divided in both of them.</p>
  <pre><code>&lt;React.Fragment&gt;
      {error ? &lt;p&gt;{error.message}&lt;/p&gt; : null}
      {!isLoading ? (
        users.map(user =&gt; {
          const { name, owner } = user;
          return (
            &lt;table class=&quot;table table-bordered table-secondary&quot; id=&quot;tableBorder&quot;&gt;
          &lt;thead style={{backgroundColor:&quot;#3787d8&quot;,color:&quot;white&quot;}}&gt;
            &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;td&gt;{FullName}&lt;/td&gt;          
          &lt;/table&gt;
          );
        })
      ) : (
        &lt;h3&gt;Loading...&lt;/h3&gt;
      )}
    &lt;/React.Fragment&gt;
        
  </code></pre>
  <p>{FullName} gives two names which is showing one in each table.</p>