title: render react table with nested JSON data
body: <p>I have a nested JSON which I am trying to render it into a table. The idea is to populate  by iterating through the JSON. My issue is when I am Iterating through <strong>Tags</strong> and trying to populate  in the environment Column. It works fine if the key exists, but if the key doesn't exist it shifts TD's to previous columns.</p>
  
  <p>For example, below in the image, you can see in the first row that <strong>web</strong> to ENV column, instead of Purpose column. for the other two, the table renders fine since the key exists.</p>
  
  <p><a href="https://i.stack.imgur.com/5tMn0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5tMn0.png" alt="Table"></a></p>
  
  <pre><code>import React, { Component } from "react";
  import { Table } from "reactstrap";
  class Example extends Component {
    state = {
      data: [
        {
          id: "1",
          States: "many",
          Purpose: "web",
          Tags: [
            {
              Key: "Name",
              Value: "server1"
            }
          ]
        },
        {
          id: "2",
          States: "Single",
          Purpose: "App",
          Tags: [
            {
              Key: "Name",
              Value: "server2"
            },
            {
              Key: "env",
              Value: "qa"
            }
          ]
        },
        {
          id: "3",
          States: "None",
          Purpose: "DB",
          Tags: [
            {
              Key: "env",
              Value: "qa"
            },
            {
              Key: "Name",
              Value: "server3"
            }
          ]
        }
      ]
    };
    render() {
      let envs;
      return (
        &lt;Table className="align-items-center table-flush" responsive&gt;
          &lt;thead className="thead-light"&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;ID&lt;/th&gt;
              &lt;th scope="col"&gt;States&lt;/th&gt;
              &lt;th scope="col"&gt;Env&lt;/th&gt;
              &lt;th scope="col"&gt;Purpose&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {this.state.data.map(info =&gt; (
              &lt;tr&gt;
                &lt;th scope="row"&gt;{info.id}&lt;/th&gt;
                &lt;td&gt;{info.States}&lt;/td&gt;
                {info.Tags.filter(env =&gt; env.Key === "env").map(e =&gt; (
                  &lt;td&gt;{e.Value}&lt;/td&gt;
                ))}
                &lt;td&gt;{info.Purpose}&lt;/td&gt;
              &lt;/tr&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      );
    }
  }
  
  export default Example;
  </code></pre>