Can't resolve `Objects are not valid as a React child` Error

Rendering the below component returns

Objects are not valid as a React child

import moment from "moment";

const PayrollRuns = (props) => {

    const runItems = props.payrollRuns.map((run) =>
        <div key={run.id} className="flex justify-between p-2 text-lg">
            <div>
                {moment(run.month.period).format('YYYY MMMM')}:
                Paid {run.payroll_run_items.length} talents
            </div>

            <div>
                {run.payroll_run_items.reduce((acc, value) => {
                  return value.amount;
                })}
            </div>
        </div>
    );

    return (
        <div className="runs-wrapper bg-white rounded-xl h-full w-48 shadow-sx-shadow p-4 flex flex-col">
            <h1 className="border-b-2 pb-4">Payroll Runs</h1>
            <div className="grow overflow-auto p-4">{runItems}</div>
        </div>
    )
}

export default PayrollRuns

I could drill down the issue to this part:

<div>
    {run.payroll_run_items.reduce((acc, value) => {
      return value.amount;
    })}
</div>

So does the error mean that the reduce method returns an object rather than a single value? If yes, how to fix this? And if not, what else might be the issue?

CodePudding user response：

Looks like you're trying to get a single value by adding it from the payroll_run_items array.

You haven't specified a start value for the accumulator, nor are you collecting the value.amount anywhere.

Here's a simple example to achieve what you want:

const payroll_run_items = [{
  amount: 34,
  // Other properties
}, {
  amount: 35,
  // Other properties
}]

console.log(payroll_run_items.reduce((acc, value) => {
  return value.amount   acc; // Add 'value.amount' to 'acc'
}, 0)) // Specify a start value