React Js Call Function from another component

Question

I want to use getIncome() and getExpense() from IncomeExpense.js File in the Balance.J s file. I have Context API in placement as well but I think I cannot use it to use the child function of another component.

IncomeExpense.js

function IncomeExpense() {
    const classes = useStyles();

    let {transactions} = useContext(TransactionContext);

    function FormRow() {

        function getIncome() {
            let income = 0;
            for (var i = 0; i < transactions.length; i++)
            {
                if (transactions[i].amount > 0)
                {
                    income += transactions[i].amount;
                }

            }
            return income;
        };

        const getExpense = () => {
            let expense = 0;
            for (var i = 0; i < transactions.length; i++)
            {
                if (transactions[i].amount < 0)
                {
                    expense -= transactions[i].amount;
                }
            }
            return expense;
        };
        // console.log(getExpense())

        return (
                            <Typography className={classes.weight} align="center" variant="h5" component="h2">
                                INCOME
                            </Typography>
                            <Typography className={classes.colorGreen + ' ' + classes.weight} align="center" variant="body2" component="p">

                                +${getIncome()}
                            </Typography>

                     <Typography className={classes.weight} align="center" variant="h5" component="h2">
                         EXPENSE
                      </Typography>
                     <Typography className={classes.colorRed + ' ' + classes.weight} align="center" variant="body2" component="p">

                         -${getExpense()}
                     </Typography>
        );
    }

    return (
        <div className={classes.root}>
                    <FormRow />
        </div>
    );
}

export default IncomeExpense;

Balance.js

import React, {useContext} from "react";
import IncomeExpense from "../IncomeExpense/IncomeExpense";

const Balance = () => {
    return (
        <div>
            <h2>YOUR BALANCE <br/> ${ getIncome() } </h2>
        </div>
    );
}

export default Balance;

please let me know if you need more code to inspect the problem. Thanks

Answer 1

It seems both functions are fairly simple, each is a function of only one variable: transactions . While some commenters are suggesting to put these in the next common ancestors of IncomeExpense and Balance , another option is to disassociate them completely from your components. Keep them as constants in some actions file, then import them and use them with transactions as an argument (similar to Ghassen Louhaichi's comment). This is also good practice if you ever want to incorporate redux.

// actions.js

export const getIncome = transactions => {

  let income = 0;
  for (var i = 0; i < transactions.length; i++) {
    if (transactions[i].amount > 0) {
      income += transactions[i].amount;
    }
  }
  return income;

};

export const getExpense = transactions => {

  let expense = 0;
  for (var i = 0; i < transactions.length; i++) {
    if (transactions[i].amount < 0) {
      expense -= transactions[i].amount;
    }
  }
  return expense;

};

I also suggest that you make FormRow its own component. Its a little strange to have it defined entire within the IncomeExpense component. Now you can use it elsewhere.

// FormRow.js

import { getIncome, getExpense } from './actions.js'

const classes = useStyles()
let {transactions} = useContext(TransactionContext);


const FormRow = () = {

  return (
      <Typography ... >
        INCOME
      </Typography>
      <Typography ... >
        +${getIncome(transactions)}
      </Typography>

      <Typography ... >
        EXPENSE
      </Typography>
      <Typography ... >
        -${getExpense(transactions)}
      </Typography>
    )

}

If all IncomeExpense does is return FormRow , maybe they don't need to be separate components?

// IncomeExpense.js
// Does this need to be a separate component than FormRow?

import FormRow from './FormRow'

const classes = useStyles()

function IncomeExpense() {

  return (
    <div className={classes.root}>
      <FormRow />
    </div>
  )
}

export default IncomeExpense;

// Balance.js

import React, {useContext, useContext} from "react";
import IncomeExpense from "../IncomeExpense/IncomeExpense";
import { getIncome, getExpense } from './actions.js'

let {transactions} = useContext(TransactionContext);

const Balance = () => {
    return (
        <div>
            <h2>YOUR BALANCE <br/> ${ getIncome(transactions) } </h2>
        </div>
    );
}

export default Balance;