I can't seem to render my column names in the CarTable.tsx when the order array of strings is passed down as prop to this component. I know it's some quirky asynchronous programming. Also when I click the button, the order of column names should change and this change should be reflected in a re-render.

I can't wrap my head around it. I thought async stuff such as setState() should go inside a lifecycle hook such as ComponentDidMount() (suggested by a coworker).

Also when the parent component (App.tsx) changes state and this state is passed down as a prop to a child component (CarTable.tsx), shouldn't CarTable re-render via the virtual DOM detecting a change?

I've tried using ComponentDidMount() and ComponentWillMount() to set the state. 

Here is the App component code.

```
import React from 'react';
import './App.css';
import { Car } from './Models/Car';
import CarTable from './CarTable';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      cars: [],
      ordering: []
    }

    this.changeColumnOrder = this.changeColumnOrder.bind(this);
  }

  componentDidMount() {
    let order = [
      ["Model", "Make", "Year"], ["Model", "Year", "Make"], 
      ["Make", "Model", "Year"], ["Make", "Year", "Model"], 
      ["Year", "Model", "Make"], ["Year", "Make", "Model"]
    ];

    let random = Math.floor(Math.random() * 5); // 0 - 5

    var models: string[] = ["Accord", "Civic", "Pathfinder"];
    var make: string = "Honda";
    var years: number[] = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];

    var cars: Car[] = [];

    for (let i = 0; i < 40; i++) {
      var randYear = Math.floor(Math.random() * 10); // 0 - 9
      var randModel = Math.floor(Math.random() * 3); // 0 - 2
      cars.push(new Car(models[randModel], make, years[randYear]));
    }

    console.log("Cars generated...");
    console.log(cars);

    this.setState({
      cars: cars,
      ordering: order[random]
    });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Car Table</h1>
          <button onClick={this.changeColumnOrder} className="columnButton">Change Column Order</button>
          <CarTable cars={this.state.cars} order={this.state.ordering}></CarTable>
        </header>
      </div>
    );
  }

  // Method for changing the column order of the contents in the car table. 
  changeColumnOrder() {

    let order = [
      ["Model", "Make", "Year"], ["Model", "Year", "Make"], 
      ["Make", "Model", "Year"], ["Make", "Year", "Model"], 
      ["Year", "Model", "Make"], ["Year", "Make", "Model"]
    ];

    let random = Math.floor(Math.random() * 5); // 0 - 5

    console.log("Testing random order");
    console.log(order[random]);

    this.setState({
      ordering: order
    });

    console.log("Testing after set state.");
    console.log(order[random]);
    this.forceUpdate();
  }
}

export default App;

```

Here is the CarTable component code.

```
import React from 'react';
import './App.css';
import { Car } from './Models/Car';

export default class CarTable extends React.Component<any, any> {

    constructor(props: any) {
        super(props);

        this.state = {
            cars: [],
            columnOrder: []
        }
    }

    componentWillMount(){
        this.setState({
            cars: this.props.cars,
            columnOrder: this.props.order
        });

        console.log("In CarTable.tsx, component did mount");
        console.log(this.state.columnOrder);
    }

    render() {
        return(
            <table id="carsTable">
                <thead>
                    <tr>
                    {this.state.columnOrder.map((column: string, key: any) => {
                        console.log("in header...")
                        console.log({column});
                        return(<th key={column}>{column}</th>)
                    })}
                    </tr>
                </thead>
                <tbody>
                    {this.state.cars.map((car: Car, key: any) => {
                        return(
                            <tr key={key}>
                                <td key={car.Make}>{car.Make}</td>
                                <td key={car.Model}>{car.Model}</td>
                                <td key={car.Year}>{car.Year}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        )
    }
}

```

With the code in the current state it is in, I am not able to render my column names (Model, Car, Year) at all.