Puede que me esté perdiendo algo, pero después de luchar un poco, seguí un tutorial que muestra los conceptos básicos de los accesorios. Mi accesorio está pasando, pero todas mis variables están regresando como indefinidas. Estoy tratando de pasar mis cálculos a un componente para mostrar el total.

Mi componente de cálculo (IncomeAndexpenses.js)

 import {useState, useEffect} from 'react'; import HeadSection from '../HeadSection'; const IncomeVals = () => { const [TotIncome, settotIncome] = useState(0); const [totTaxBrackets ,settotTaxBrackets] = useState(0); const [AvValues ,setAvValues] = useState(); const Users= [{ name: 'Johan Golden', salary: 60000 }, { name: 'Susan Golden', salary: 27000 } ] const expenses= [{ name: 'Johan Golden', salary: 60000 }, { name: 'Susan Golden', salary: 27000 } ] useEffect(() => { let totalIcome = 0; let totalIcomeTax = 0; Users.forEach(element => { totalIcome += element.salary; }); console.log(totalIcome); settotIncome(totalIcome); //taxBrackets totalIcome = totalIcome * 12; console.log(totalIcome); }, []); return ( <> <HeadSection name="josh" totalIncome = {TotIncome}/> </> ) } export default IncomeVals;

Y luego mostrar en este componente (HeadSection)

 import React from "react"; const HeadSection = (props) => { console.log(props.name); return ( <div className='SectionOne'> <hr></hr> <div className='subSections'> <div className='subSection'><h3>Total Income</h3><br></br><h2>R{props.totalIncome}</h2></div> <div className='subSection'><h3>Total Expenses</h3><br></br><h2>R13 327</h2></div> <div className='subSection'><h3>Total Income after tax</h3><br></br><h2>R65 560</h2></div> </div> <hr></hr> </div> ) } export default HeadSection;

¡Cualquier ayuda sería muy apreciada!