AboutTestingTool.js

import React from 'react';
import PropTypes from 'prop-types';

const style = {
  border: '1px solid black'
};

export class AboutTestingTool extends React.Component {
  render() {
    console.log(this.props.supported_tests);
    return (
      <div className="container" id="about_testing_tool" style={style}>
        <p>Version Number: {this.props.version_number}</p>
        <p>Support information: {this.props.support_information}</p>
        <p>Supported tests: {this.props.supported_tests}</p>
      </div>
    );
  }

  static propTypes = {
    supported_tests: PropTypes.array,
    support_information: PropTypes.string,
    version_number: PropTypes.string
  };

  static defaultProps = {
    version_number: 'v0.0.1'
  };
}

App.js

import React from 'react';
import PropTypes from 'prop-types';

import { DebugPanel } from './DebutPanel';
import { SessionConfig } from './SessionConfig';
import { AboutTestingTool } from './AboutTestingTool';
import { Agent } from './Agent';
import { Footer } from './Footer';
import { TestNavigation } from './session/TestNavigation';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { hasData: false };
  }

  componentDidMount() {
    this.refresh_state();
  }

  render() {
    if (!this.state.hasData) {
      return <div>Loading</div>;
    }
    return (
      <div>
        <TestNavigation supported_tests={this.state.about.tests} />
        <Agent
          agent_link={this.state.about.agent.location_url}
          test={this.state.about.agent.text}
        />
        <DebugPanel />
        <SessionConfig
          amqp_url={this.state.session.amqp_url}
          user_info={this.state.session.user_info}
        />
        <AboutTestingTool
          // version_number={}
          // support_information={}
          supported_tests={this.state.about.tests}
        />
        <Footer />
      </div>
    );
  }

  static propTypes = {
    // supported_tests: PropTypes.arrayOf(String).isRequired
  };

  refresh_state() {
    fetch('/state')
      .then(response => {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' + response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(data => this.setState(data));
      })
      .catch(err => {
        console.log('Fetch Error :-S', err);
      });
    this.state.hasData = true;
  }
}