PieChartExample.js

// This is my child Pie Chart Component. 

import React, {Component} from 'react';
import ReactD3 from 'react-d3-components';
const PieChart = ReactD3.PieChart;
  
class GroupsPieChart extends Component {
    constructor(props){
        super(props);
        this.state = {
            tooltipPie: function(x, y) {
                return y.toString();
            }
        }
        
    }
    render() {
        let sort = null;
        return (
            <PieChart
                data={this.props.data}
                height={200}
                width={333}
                margin={{top: 0, bottom: 0, left:100, right: 100}}
                tooltipOffset={{top: 175, left: 200}}
                tooltipHtml={this.state.tooltipPie}
                tooltipMode={this.state.fixed}
                sort={sort} />
        );
    }
}

export default GroupsPieChart;

// I'm importing the child component I created with the PieChart into a component that looks more or less like this.
// This is pretty much pseudocode

import GroupsPieChart from '../homeComponents/GroupsPieChart.jsx';
class HomePage extends Component {	
	constructor(props){
    super(props);
    this.state = {
        I set a bunch of properties here for the State of this component. I've even tried setting the tooltip function here
        and passing it down to PieChart as props. 
    }       
  }
  componentDidMount(){
    I'm running ajax calls in here to get data and update state with that data for the graph. 
    I pass that data down as props and it seems to be working perectly
  }
	render() {
		let sort = null;
		return (
					<div className="pieLayout">
						<h4># of Groups</h4>
							<GroupsPieChart 
								data={this.state.totalGroups}
								tooltipHtml={this.state.tooltipPie} // this is arbitrary. I but this is how I passed the method down to PieChart
							/>
					</div>
				)
		}