Weapon.js

import 'isomorphic-fetch'; // for older browsers https://caniuse.com/#search=Fetch

import React, { Component } from 'react';
import 'styles.css';

export default class Weapon extends Component {
  componentDidMount() {
    const options = {
      headers: {
        'x-api-key': 'abc-123'
      }
    };

    fetch('https://bungie.net/Platform/etc/etc', options)
      .then(res => res.json())
      .then(data => {
        console.log(data.Response.displayProperties.name);

        this.setState({ item: data.Response });
      });
  }

  render() {
    const { item } = this.state;

    // Warning though - React will perform an initial render *before* the API call has
    // completed, so item will initially be undefined. Make sure you guard against this

    // Maybe like this?
    if (!item) {
      return <div>Loading...</div>;
    }

    return (
      <div className="weapon">
        <div className="header">
          <img src="" alt="" />
          <h3>Weapon Type</h3>
          <h1>{item.displayProperties.name}</h1>
        </div>

        <div className="statistics">
          <img src="" alt="" />
          <p>Magazine</p>
          <img src="" alt="" />
          <p>RPM</p>
        </div>
      </div>
    );
  }
}