Send array of objects to render in React

Question

Having an array of this form:

[{"game_id":4,"city":"London","year":2018,"athlete_id":"1"},
 {"game_id":2,"city":"Paris","year":2016,"athlete_id":"2"}]

it is received from back-end and stored like this:

callAPI() {
    fetch('http://localhost:9000/testAPI')
      .then((res) => res.text())
      .then((res) => this.setState({ apiResponse: res }));
  } 

and then, in the render is send as props to the Table component:

  render() {
    return (
      <div className='App'>
        <header className='App-header'>
          <Table data={this.state.apiResponse} />
        </header>
      </div>
    );
  }

The problem comes here when I want to send to the table only parts of apiResponse.

This is the component:

class Table extends React.Component {
  constructor(props) {
    super(props);
  }

  getGames = function () {
    return this.props.data;
  };

  render() {
    return (
      <div>
        <table>
          <thead>
            <tr>{this.getGames()}</tr>
          </thead>
        </table>
      </div>
    );
  }
}

The above code sends all the data, so I tried to send only the data that I want, for example only the keys and make headers out of them.

So I replaces the content of getGames() with this:

  getGames = function () {
    return Object.keys(this.props.data[0]);
  };

but it throws this error:

TypeError: Cannot convert undefined or null to object

What I want is to create a table with headers: game_id, city, year, athelete_id and their columns the show their corresponding data.