Реагировать на данные заголовка столбца таблицы

Question

Я пытаюсь создать приложение Jeopardy, используя React и React Table, и я застрял. Я пытаюсь, чтобы заголовки столбцов были заполнены фактическим названием категории из API-интерфейса безопасности. Объект, полученный из API, выглядит следующим образом:

"id": 11111,
"title": "papers",
"clues_count": 5,
"clues":

где title - название категории. Этот запрос делается 6 раз, по одному разу для каждого столбца. Прямо сейчас у меня есть «категория x», жестко запрограммированная как значение заголовка для каждого столбца. Я не могу понять, как получить заголовок в качестве заголовка столбца. Мой код ниже (я знаю, что он грязный и нуждается в рефакторинге, но я кодирую только около 6 недель, поэтому, пожалуйста, будьте терпеливы):

Компонент столбца:

import React, { Component } from 'react';
import axios from 'axios';
const CAT_NUM = function () {
  return Math.floor(Math.random() * Math.floor(18418));
}

const URL = `http://jservice.io/api/category?id=`

class Column extends Component {
  constructor(props) {
    super()

    this.state = {
      category: '',
      clues: []
    }

    this.colRef = React.createRef();
  }

  getClues = function () {
    let self = this;

    const category = CAT_NUM();
    const clueUrl = URL + category;

    const request = axios.get(clueUrl)
      .then(function (response) {

        //fetch the category title
        const categoryTitle = response.data.title;

        //get an array of all the clues for this category
        const clueArray = response.data.clues;

        //grab the first five clues -- could be modified to grab a random five, but there are 18418 categories...
        const fiveClues = clueArray.slice(0, 5);=

        //set state to contain category, five clues
        self.setState({
          category: categoryTitle.toUpperCase(),
          clues: fiveClues
        })

        if (self.props.hasOwnProperty('addColumnData')) {
          self.props.addColumnData(self.state);
        }

        //check the state
    });
  }

  render () {
    {if (this.state.clues.length === 0) {
      this.getClues();
      return (
        <div>Loading...</div>
      )
    }
  }

    return (
        <div ref={this.colRef} />
    );
  }
}

export default Column

Компонент приложения:

import React, { Component } from 'react';
import Board from './components/Board.js';
import Column from './components/Column.js';
import ReactTable from "react-table";

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import "react-table/react-table.css";
import "./index.css";


class App extends Component {
  constructor() {
    super()

    this.state = {hasData:false};

    this.columnData = [];

    this.addColumnData = this.addColumnData.bind(this);
    this.renderColumns = this.renderColumns.bind(this);

  }
//Create each column with dollar amounts
  columns = [
    {
      Header: 'Category 1',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 2',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 3',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 4',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 5',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    },
    {
      Header: 'Category 6',
      accessor: 'value',
      style: {
        borderRadius: "5px",
        borderColor: "black"
      }
    }
  ]
  renderColumns () {
    let columnArray = [];
    console.log('render columns fn sees: ', this);
    for (let i=0; i<6; i++) {
      columnArray.push(
        <Column addColumnData={this.addColumnData} key={i}/>
      )
    }
    console.log(this.columnData)
    // const question = this.columnData[0].clues[0].question;
    // console.log(question)
    return columnArray;
  }


  addColumnData (object) {
    this.columnData.push(object)
    if (this.columnData.length === 6) {
      this.setState({columnData: this.columnData, hasData: true})
    }
    // console.log('columnData contains: ', this.columnData)
    // return this.columnData
    }


  render() {
    const getTdProps = (state, rowInfo, column, instance) => {
      return {
        onClick: (e, handleOriginal) => {
            console.log('You clicked: ', column.Header, rowInfo.original.value)
        }
      }
    }

    if(!this.state.hasData) {
      return (
        <div>
          {this.renderColumns()}
        </div>
      )
    }
return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Project (in) Jeopardy</h1>
    </header>
    <Column />
    <div className="container">
      <div className="row">
        <div className="col-md-2">
          <div className="score">
            Player 1 Score: {}
          </div>
        </div>
        <div className="col-md-8" id="table">
          <ReactTable
            style={{
              height:"500px",
              textAlign:"center",
              backgroundColor: "#060CE9",
              borderRadius: "5px",
              borderColor: "#000000",
              color: "#FFCC00",
              fontSize: "20",
              verticalAlign: "middle"
            }}
            data={this.state.columnData[0].clues}
            columns={this.columns}
            defaultPageSize = {5}
            sortable={false}
            showPagination={false}
            showPageSizeOptions={false}
            getTdProps={getTdProps}
          />
        </div>
        <div className="col-md-2">
          <button type="button" className="btn btn-primary">Restart</button>
        </div>
      </div>
    </div>
  </div>
);
  }
}

export default App;

Я пойму, если никто не сможет обойти это, так как я вставил кучу кода. Извините, я действительно новичок во всем этом. Спасибо за всех, кто нашел время, чтобы помочь мне!