RawData.js

import React, {Component} from 'react';
import striptags from 'striptags';

import PivotTableUI from 'react-pivottable/PivotTableUI';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

import 'react-pivottable/pivottable.css';

const PlotlyRenderers = createPlotlyRenderers(Plot);

class RawData extends Component {
  constructor (props) {
    super(props)
    this.state = {
      mydata: null,
    }
  }

  GetRawData = (props) => {
    let url = "";
    fetch(url).then(result=> {return result.json()})
      .then(result => {
        this.setState({mydata:result})
    })
  }

  componentDidMount() {
    this.setState({mydata: null})
    this.GetRawData(this.props)
  }

  componentDidUpdate(prevProp, prevState) {
    if( (prevProp.state.ssid != this.props.state.ssid) || (prevProp.state.batchnum != this.props.state.batchnum) ) {
      this.setState({mydata: null})
      this.GetRawData(this.props)
    }
  }

  render() {
    return (
      <div>
        { (this.state.mydata)
          ? <PivotTableUI 
                data={this.state.mydata}
                onChange={s => this.setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                      {...this.state}
              />
          : <div><img src="loading-balls.svg" alt="Loading Icon" /></div>
        }
      </div>
    )
  }
}

export default RawData;

Report.js

import React, {Component} from 'react';
import ReportDetail from './ReportDetail.2';
import ListVarNames from './ListVarNames';
import RawData from './RawData';

import 'react-widgets/dist/css/react-widgets.css';
import 'bootstrap/dist/css/bootstrap.min.css'; 

import Multiselect from 'react-widgets/lib/Multiselect';

import FilteredMultiSelect from 'react-filtered-multiselect'

class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ReportType:"RawData",
      ssid:null,
      batchnum:null,
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange = (e) => {
    const {name, value} = e.target;
    this.setState(prevState => ({ [name]: [value]}))
  }

  submit = (e) => {
    e.preventDefault()

    this.setState({'ssid':document.getElementById('ssid').value})
    this.setState({'batchnum':document.getElementById('batchnum').value})
  }

  render() {
    return (
      <div className="col-12">
          <div>
            <form id="form" onSubmit={this.submit}>
            <input id="ssid" name="ssid" placeholder="ssid" />
            <input id="batchnum" name="batchnum" placeholder="batchnum" />
            <input type="submit" value="submit" />
            </form>
          </div>

        { (this.state.ssid && this.state.batchnum) 
            ? <RawData 
                handleChange={this.handleChange}
                state={this.state}
              />
            : <div>Need an ssid and batchnum to pull data.</div>
        }

        {/* <ListVarNames 
          state={this.state}
          handleChange={this.handleChange}
        /> */}
      </div>
    )
  }
}

export default Report;