ShowResultsFromAPI.jsx

import React, { Component } from 'react'; // Bad import, "Component" is a named import within the react library. No more than 1 default export per file
import PropTypes from 'prop-types';
import queryAPI from 'queryAPI';

class ShowResultsFromAPI extends Component { // Removed "()" after the Component class extension
  constructor(props) { // props argument missing here
    super(props);

    // Removed "this.container" in this position as it didn't serve any purpose

    // Added state initilization
    this.state = {
      data: null,
      error: false,
      queryDelay: this.props.apiQueryDelay // Copy over this value from props to our state so that we can control it
    }
  }

  onDisableDelay = () => { // Switched to arrow function to keep "this" context
    this.state.queryDelay = 0; // Shouldn't not alter props directly. Instead take control of the prop by storing it in our state and modify as needed
  }

  handleClick = async () => { // Switched to arrow function to keep "this" context
    if (this.state.queryDelay !== 0) { // Switch to state instead of using the prop
      setTimeout(async () => {
        await this.fetchData()
      }, this.state.queryDelay);  // Switch to state instead of using the prop
    } else {
      await this.fetchData() // Directly call the method if the delay was set to 0, no timeout required
    }
  }

  fetchData = async () => { // Switched to arrow function to keep "this" context
    try {
      const response = await queryAPI() // Switched to async/await syntax for code clarity

      if (response.data) {
        this.setState({
          data: response.data,
          error: false
        });
      } else {
        this.setState({ error: true }) // No data, set error to true
      }
    } catch (_) {
      this.setState({ error: true }) // Error, set error to true
    }
  }

  render() {
    // 1. Removed if statement from the JSX as that is invalid JSX. Used variable instead to prep content
    // 2. The variable "error" by itself is undefined. I switched that to refer to "this.state.error"
    // 3. Surrounded the whole JSX with a div element as multiple elements at root level isn't valid JSX
    // 4. Switched call to variable "data" to "this.state.data" as that's where the data is
    // 5. Replaced "Button" (capital B) with a standard <button> with the type of "button". The initial capitalized button isn't imported as a component, therefore invalid
    const content = this.state.error ? (<p>Sorry - there was an error with your request.</p>) : this.state.data

    return (
      <div>
        <div class="content-container" ref="container">{content}</div>
        <button type="button" onClick={this.onDisableDelay}>Disable request delay</button>
        <button type="button" onClick={this.handleClick}>Request data from endpoint</button>
      </div>
    )
  }
}

// Removed "displayName" as it's not serving a big purpose.

ShowResultsFromAPI.defaultProps = {
  apiQueryDelay: 1500 // default to something other than 0
};

ShowResultsFromAPI.propTypes = {
  apiQueryDelay: PropTypes.number // Use the "PropType" as React.PropType was deprecated in 15.5
};

export default ContentContainer; // exported component as the default