Grab data from another component for Recharts

Question

So I have two components( index.js and Stats.js ). Inside of stats I have a pie chart from Recharts and the data array is inside of that file. The 'Value' object inside of data is just an arbitrary number but I would like to grab that value from the state of other objects in index.js . Inside of index.js I have three objects: proteins, fats, carbs with state value. I would like to grab those values and put them inside of the data array.

This is how the code looks like and runs without errors: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col } from 'reactstrap';
import { Header } from "./Header.js";
import { Info } from "./Info.js";
import { Forms } from "./Forms.js";
import { Stats } from "./Stats.js";


class Macros extends React.Component{

constructor(props){
    super(props);

    this.state = {
        age: '',
        weight: '',
        gender: 'male',
        feet: '',
        inches: '',
        BMR: 0,
        activity: 'sedentary',
        goal: 'lose',
        TDEE: 0,
        fatsP: .20,
        carbsP: .40,
        proteinsP: .40,
        fatsG: 100,
        carbsG: 300,
        proteinsG: 100,
    };

    this.handleGenderChange = this.handleGenderChange.bind(this);
    this.handleAgeChange = this.handleAgeChange.bind(this);
    this.handleWeightChange = this.handleWeightChange.bind(this);
    this.handleFeetChange = this.handleFeetChange.bind(this);
    this.handleInchChange = this.handleInchChange.bind(this);
    this.handleActivityChange = this.handleActivityChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.calculateBMR = this.calculateBMR.bind(this);
    this.calculateGrams = this.calculateGrams.bind(this);

}

handleGenderChange(event) {
    this.setState({gender: event.target.value});
}
handleAgeChange(event) {
    this.setState({age: event.target.value});
}
handleWeightChange(event) {
    this.setState({weight: event.target.value});
}
handleFeetChange(event) {
    this.setState({feet: event.target.value});
}
handleInchChange(event) {
    this.setState({inches: event.target.value});
}
handleActivityChange(event) {
    this.setState({activity: event.target.value});
}
handleSubmit(event) {
    event.preventDefault();
    this.calculateBMR();
}

calculateBMR(callback) {
    let calBMR = 0;
    let calTDEE = 0;
    if(this.state.gender === 'male'){
        calBMR = ((10 * ((this.state.weight) / 2.20462)) + 
            (6.25 * ((this.state.feet * 30.48) + (this.state.inches * 2.54))) - 
            (5 * this.state.age)) + 5;
    }
    else {
        calBMR = ((10 * ((this.state.weight) / 2.20462)) + 
            (6.25 * ((this.state.feet * 30.48) + (this.state.inches * 2.54))) - 
            (5 * this.state.age)) - 161;
    }
    if(this.state.activity === 'sedentary'){
        calTDEE = calBMR * 1.2;
    }
    else if(this.state.activity == 'light'){
        calTDEE = calBMR * 1.3;
    }
    else if(this.state.activity == 'moderate'){
        calTDEE = calBMR * 1.5;
    }
    else if(this.state.activity == 'active'){
        calTDEE = calBMR * 1.7;
    }
    else{
        calTDEE = calBMR * 1.9;
    }

    this.setState({BMR: Math.floor(calBMR), TDEE: Math.floor(calTDEE)}, callback);
    this.calculateGrams();
}

calculateGrams(callback){
    let fatsG = (this.state.TDEE * this.state.fatsP) / 9;
    let carbsG = (this.state.TDEE * this.state.carbsP) / 4;
    let proteinsG = (this.state.TDEE * this.state.proteinsP) / 4;

    this.setState({fatsG: Math.floor(fatsG), carbsG: Math.floor(carbsG), proteinsG: Math.floor(proteinsG)});
}

render(){
    return(
        <Container>
            <Row>
                <Col>
                    <Header />
                </Col>
            </Row>
            <Row>
                <Col xs="4"><Info /></Col>
                <Col xs="4"><Forms onGenderChange={this.handleGenderChange}
                                gender={this.state.gender} onAgeChange={this.handleAgeChange}
                                onWeightChange={this.handleWeightChange} onFeetChange={this.handleFeetChange}
                                onInchChange={this.handleInchChange} onActivityChange={this.handleActivityChange}
                                onSubmit={this.handleSubmit}
                            />
                </Col>
                <Col xs="4"><Stats gender={this.state.gender} age={this.state.age}
                                weight={this.state.weight} feet={this.state.feet}
                                inches={this.state.inches} activity={this.state.activity}
                                BMR={this.state.BMR} TDEE={this.state.TDEE}
                                carbsP={this.state.carbsP} fatsP={this.state.fatsP}
                                proteinsP={this.state.proteinsP} carbsG={this.state.carbsG}
                                fatsG={this.state.fatsG} proteinsG={this.state.proteinsG}
                            />
                </Col>
            </Row>
        </Container>
    )
}
}

ReactDOM.render(<Macros />, document.getElementById('root'));

Stats.js

import React from 'react';
import { Progress } from 'reactstrap';
import {PieChart, Pie, Legend} from 'recharts';

const data02 = [{name: 'Carbs', value:100},
                {name: 'Fats', value: 300},
               {name: 'Proteins', value: 100}]

export class Stats extends React.Component{
    render(){
        return(
            <div>
                <h3>Your Stats</h3>

            <PieChart width={350} height={350}>
                <Pie data={data02} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label/>
            </PieChart>

        </div>
    );
  }
}

I attempted doing this inside Stats.js under the data02 array to get the state of carbsG fatsG and proteinsG but could not get the value

import React from 'react';
import { Progress } from 'reactstrap';
import {PieChart, Pie, Legend} from 'recharts';

const data02 = [{name: 'Carbs', value:this.props.carbsG},
                {name: 'Fats', value: this.props.fatsG},
               {name: 'Proteins', value: this.props.proteinsG}]

export class Stats extends React.Component{
    render(){
        return(
            <div>
                <h3>Your Stats</h3>

            <PieChart width={350} height={350}>
                <Pie data={data02} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label/>
            </PieChart>

        </div>
    );
  }
}

Answer 1

You cannot access this.props outside React component.

Change your code to this.

 import React from 'react'; import { Progress } from 'reactstrap'; import {PieChart, Pie, Legend} from 'recharts'; export class Stats extends React.Component{ constructor(props) { super(props) this.state = { data02: [] } } componentDidMount() { this.setState({ data02: [...this.state.data02, {name: 'Carbs', value:this.props.carbsG}, {name: 'Fats', value: this.props.fatsG}, {name: 'Proteins', value: this.props.proteinsG}] }) } render(){ return( <div> <h3>Your Stats</h3> <PieChart width={350} height={350}> <Pie data={this.state.data02} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label/> </PieChart> </div> ); } }