title: Array data not rendering in data table using this.props - ReactJS
body: <p>I have two react components. In which one of the components processes the CSV data using Papa Parse and another one renders the data table. I am using the first component to parse and send the data to the second component using this.props. </p>
  
  <p>Here, I'm using the Jquery data table to render the CSV data in the web. Problem is I'm unable to render the data inside the data table using this.props. 
  (this issue has been resolved by @drew-reese) </p>
  
  <p>Also is it possible to render graph as defaultContent API option in data table? Please refer to <code>second component</code>.</p>
  
  <p>Here Is What I'm trying,</p>
  
  <p><code>First component:</code></p>
  
  <pre><code>var output = [];
  class Tables extends React.Component {
  
      constructor(props) {
        super(props);
        this.state = {
            data: []
          }
        this.updateData = this.updateData.bind(this);
      }
      componentWillMount() {
  
        var csvFilePath = require("../data/input.csv");
        Papa.parse(csvFilePath, {
          header: true,
          download: true,
          skipEmptyLines: true,
          complete: this.updateData
        });
      }
      updateData(result) {
        output = result.data;
        output = output.map(obj =&gt; Object.values(obj));
        console.log(output) //this works
      this.setState({data: output})    
      }
      render() { 
          return(
              &lt;div&gt;
                  &lt;Charts data={this.state.data}/&gt;
              &lt;/div&gt;
          )
      }
    }
    export default Tables;
  </code></pre>
  
  <p><code>Second comp</code></p>
  
  <pre><code>import { Line } from 'react-chartjs-2';
  const $ = require('jquery')
  $.DataTable = require('datatables.net');
  class Charts extends React.Component {
  
      componentDidMount() {
          console.log(this.el);
          this.$el = $(this.el)
          this.$el.DataTable({
              data: this.props.data,
              columns: [
                  { title: "heading" },
                  { title: "heading" },
                  { title: "heading " },
                  { title: "heading " },
                  { title: " heading",\
                    defaultContent: &lt;Line /&gt; #chartjs graph
                   },
              ]
          })
      }
      componentWillUnmount() {
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;table className="display" width="100%" ref = {el =&gt; this.el = el }&gt;&lt;/table&gt;
                  &lt;p&gt;{this.props.data}&lt;/p&gt;
              &lt;/div&gt;
          );
      }
  }
  
  //ChartJS line graph
  &lt;Line
      data={data}
      options={options} /&gt;
  </code></pre>
  
  <p>I have tried to display the same data inside a p tag, but not working. Actually i'm unable to pass the data from one component to another. Any ideas? Do I have to use any async or something. Or is there any better way to parse csv and display in a data table? </p>
  
  <p>Is it possible to render a chart inside one of the columns in the data table? Please refer to the last column and defaultContent API section.</p>
  
  <p>Thanks in advance.</p>