We don't know what your array of objects look like so we have to guess:

So I guess this input:

const initState = [
    { id: 1, name: "bread", quantitiy: 50 },
    { id: 2, name: "milk", quantitiy: 20 },
    { id: 3, name: "water", quantitiy: 10 }
  ];

And I get this output:

It's completely flexible so if we have input:

const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];

Then we get this output:

The most important thing is to map over the object values inside the map which maps over the state array:

{state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}

full demo below and on codePen: https://codepen.io/Alexander9111/pen/zYvEbML

I used a functional component but it would be very similar with a class-based component.

NOTE: you could also create a row component and then call that component inside the map over the state array. Inside this row component, you would map of the Object keys like I did and output table data elements. It's a balance between death by component (i.e. breaking down everything into smaller and smaller components nested inside each other) and fewer components which are too complex.

function MyTable() {
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];
  const [state, setState] = React.useState(initState);

  return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable />, document.getElementById("target"));

th,
td {
  border: 1px solid black;
  margin: 0px 0px;
  padding: 5px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="target"></div>

You're doing

{item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

that prints false like <tr>false</tr> if mobile_open is false.

try

{item.mobile_open ?
              (<tr className="test-td">
                <td>...</td>
              </tr>) : null
            }

As for the div warning consider using React 16 Fragments

using React 16.0 fragment syntax

<tbody>
  {myList.map((item, i) => {
    return [
        <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
          <td className="toggler">
            {item.mobile_open && <ArrowUp />}
            {!item.mobile_open && <ArrowDown />}
          </td>
          <td>{item.elem_one}</td>
          <td>{item.elem_two}</td>
          <td>{item.elem_three}</td>
        </tr>,
        {item.mobile_open &&
          <tr className="test-td">
            <td>...</td>
          </tr>
        }

    ];
  })}
</tbody>

But I prefer the most recent React 16.2 Fragment Syntax

import React, { Fragment } from "react";

<tbody>
      {myList.map((item, i) => {
        return (
          <Fragment>
            <tr key={i} onClick={toggleMobileOpen.bind(this, i)}>
              <td className="toggler">
                {item.mobile_open && <ArrowUp />}
                {!item.mobile_open && <ArrowDown />}
              </td>
              <td>{item.elem_one}</td>
              <td>{item.elem_two}</td>
              <td>{item.elem_three}</td>
            </tr>
            {item.mobile_open &&
              <tr className="test-td">
                <td>...</td>
              </tr>
            }
          </Fragment>
        );
      })}
    </tbody>

More on fragments here

TL;DR Fully functionnal example :

//Columns defines table headings and properties to be placed into the body
const columns = [{ heading: 'Name', property: 'name' }, { heading: 'Age', property: 'age' }, { heading: 'Sex', property: 'sex' }, { heading: 'Breed', property: 'breed' },]

//Data is the array of objects to be placed into the table
const data = [{ name: 'Sabrina', age: '6', sex: 'Female', breed: 'Staffordshire' }, { name: 'Max', age: '2', sex: 'Male', breed: 'Boxer' }]

const App = props => <Table columns={columns} data={data} propertyAsKey='name' />

const Table = ({ columns, data, propertyAsKey }) => 
    <table className='table'>
        <thead>
            <tr>{columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)}</tr>
        </thead>
        <tbody>
            {data.map(item =>
                <tr key={`${item[propertyAsKey]}-row`}>
                    {columns.map(col => <td key={`${item[propertyAsKey]}-${col.property}`}>{item[col.property]}</td>)}
                </tr>
            )}
        </tbody>
    </table>
    
ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id='root'>

The main thing that would highly reduce this code is the map function. This function can be applied on an array, execute a callback on every item in the array and returns a new array.

By using it you can reduce the following code :

let headerRow = [];

columns.forEach(col => {
    headerRow.push(
        <th key={`header-${col.heading}`}>{col.heading}</th>
    );
});

Can be reduced to this with the exact same result :

const headerRow = columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)

You can now include this function directly into your JSX :

<thead>
    <tr>{columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)}</tr>
</thead>

And the same thing with nested mapping for the body :

<tbody>
    {data.map(item => 
        <tr key={`${item[key]}-row`}>
            {columns.map(col => <td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>)}
        </tr>
    )}
</tbody>

Your full buildTable function is now reduced to the following :

buildTable = (columns, data, key) => {
    return (
        <>
            <thead>
                <tr>{columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)}</tr>
            </thead>
            <tbody>
                {data.map(item => 
                    <tr key={`${item[key]}-row`}>
                        {columns.map(col => <td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>)}
                    </tr>
                )}
            </tbody>
        </>
    );
};

If you want to go a little further you can also delete this function and embed this code in your render function JSX. I will also convert your component into a stateless function, since you are not using any state value :

const Table = ({ columns, data, propertyAsKey }) => //Deconstructs your props
    <table className='table'>
        <thead>
            <tr>{columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)}</tr>
        </thead>
        <tbody>
            {data.map(item =>
                <tr key={`${item[propertyAsKey]}-row`}>
                    {columns.map(col => <td key={`${item[propertyAsKey]}-${col.property}`}>{item[col.property]}</td>)}
                </tr>
            )}
        </tbody>
    </table>

(You may add brackets and a return statement after the arrow sign, its up to you)

It is also not required to have a fragment as a parent element in your render, as long as there is a single element, it is fine :

class App extends React.Component {
  render() {
    return (
        <Table
          columns={columns}
          data={data}
          propertyAsKey='name' //The data property to be used as a key
        />
    );
  }
}

Your App component could also be converted to a stateless component:

const App = props => <Table columns={columns} data={data} propertyAsKey='name' />

i’ve never used react-table and i could be wrong but i feel like is way more complicated than it needs to be

Please change this part like below

vm.map(x => x.Virtual_Machines).map(y => (
  <tr>
    <td>{x.VM_Name}</td>
    <td>{x.VM_Location}</td>
    <td>{x.VM_Encryption}</td>
  </tr>
));

One possible issue that I can see is not properly setting state in handleSubmit. You should do something like this:

handleSubmit = (e) => {
    e.preventDefault();
    const copyStateInvoices = [...this.state.invoices]
    copyStateInvoices.push({
        description: this.state.description,
        unit: this.state.unit,
        quantity: this.state.quantity
    })
    this.setState({
      invoices: copyStateInvoices,
    })
    //console.log(this.state.invoices[].description);

};

Component's state is immutable and if you try to change the values in state it will happen but react will not respect that. Read more about these fundamentals on react main website.

Thanks

Your problem might not be an optimization problem. What you are searching for is to have only one function that return the render for keys of your object. Here is a suggestion:

• Change you renderYear() method to this:

    renderField(objectKey) {
        if (this.props.total_calculation.length === 0) {
            return null;
        }
        return this.props.total_calculation.map(function (obj, key) {
            return (
                <td key={key} colSpan="2">
                    {obj[objectKey]}
                </td>
            );
        });
    }

The argument objectKey of the renderField() method takes as argument a string that is a key of the object you want to render. Then now you can call it like this:

        <tr className='year'>
            <td>Year</td>
            {{this.renderField('Year')}}
        </tr>

You can call the renderField() method on other key of your object like 'rent_increase'
You should also check the Open/closed principle of the SOLID principles because your problem has similar solution to it.

I think this is what you are looking for:

 const res = {
    data: [
      {
        _id: "603a651e22",
        name: "name 1",
        state: "F",
        createdAt: "2021-02-25T17:13:42.218Z",
        participants: [
          {
            name: "something",
            email: "[email protected]",
          },
          {
            name: "something 2",
            email: "[email protected]",
          },
        ],
      },
      {
        _id: "sdfhfh312312",
        name: "name",
        state: "F",
        createdAt: "2021-02-26T18:43:49.240Z",
        participants: [
          {
            name: "something",
            email: "[email protected]",
          },
          {
            name: "something 2",
            email: "[email protected]",
          },
        ],
      },
    ],
  };
  console.log(res.data);
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>name</th>
            <th>state</th>
            <th>created</th>
            <th>participants</th>
          </tr>
        </thead>
        <tbody>
          {res.data?.map((item, index) => {
            return (
              <tr key={index}>
                <th scope="row">{item._id}</th>
                <td>{item.name}</td>
                <td>{item.state}</td>
                <td>{item.createdAt || ""}</td>
                <td>
                  <ul>
                    {item.participants.map((p, i) => {
                      return (
                        <li key={i}>
                          {p.name} || {p.email}
                        </li>
                      );
                    })}
                  </ul>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );

Let me know if it works!