How to reuse React components and sum children's values up

Projects Personal Projects
1

Hi all,
I’m quite new to Codecademy and currently revitalize my programming skills.
Currently, I try to transfer all learnings from my “Front-End App w/ React” Skill Path to an individual project.
My target is to display various financial assets and get an entire overview of the financial situation.

That’s why I created an AssetOverview Component (parent) that creates multiple Asset Components (reused child) depending on the initial input object.

I try to reduce the code to the relevant part (at least my opinion) to keep complexity as low as possible.

const input = {
  asset1: {
    name: 'ETF',
    startingValue: 100
  },
  asset2: {
    name: 'Cash',
    startingValue: 20000
  }

class AssetOverview extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            total: 0
        }
        this.updateTotal = this.updateTotal.bind(this);
    }

    updateTotal(add) {
        const prevValue = this.state.total;
        this.setState(
            { total: (prevValue + add) }
        );
    }

    render() {
        return (
        <div className="AssetList">           
           {
              input.map (asset => {
              return <Asset asset={asset} updateTotal={this.updateTotal} />
              })
           }
        </div>
     )
  }
}

class Asset extends React.Component {

    constructor(props) {
        super(props);
        this.props.updateTotal(this.props.asset.startingValue);     
    }

    render() {
        return (
            <div>
                {this.props.asset.startingValue}
            </div>
        )
  }
}

Please see the code above. I know, I can easily sum up the value by directly accessing the input object. This is just the first step into some more logic I want to implement.

Later, I want to calculate the amount in the future by compounding the starting value with different interest rates and different durations. This would then be done in the respective Asset component (child). After all this, I finally want to display the total future amount in my AssetOverview (Parent).

Note: Calculation future amounts, individually display the respective future amount in the respective component → all this works already.

Hope you understand my problem and can help me.

BTW: @Codecamy Team. Brilliant work! Thanks.

Best regards, thanks in advance,
Nico