• Pasé un accesorio a un componente secundario.
• El accesorio envía un objeto al componente secundario.
• En el componente secundario tengo una matriz de objetos.
• Luego uso el objeto prop pasado y lo recorro bajo ciertas condiciones.
• Cuando se cumple esa condición, realizo algunos cambios en la matriz de objetos presente en el componente secundario.

Ahora quiero usar useState de manera que cuando se realicen los cambios en la matriz de objetos en el accesorio secundario, quiero que estos cambios se agreguen sobre su versión anterior en lugar de una nueva matriz de objetos que solo muestre los cambios realizados. .

 const filteredExpenses = expenses.filter( (expense) => { return expense.date.getFullYear().toString() === filteredYear }); return( <> <NewExpense onAddExpense = {addExpenseHander}/> <Filter selected={filteredYear} onRecieveData={publishData} selectedMonth={monthlyCost} expenses={filteredExpenses}/>

El código anterior pasa el accesorio al componente secundario llamado Filter

El siguiente código es del componente secundario que recibe el accesorio.

 export default function Filter(props){ const recieveClick = (data) => { props.onRecieveData(data);} const chartDataPoints = [ {label:'Jan', value:0}, {label:'Feb', value:0}, {label:'Mar', value:0}, {label:'Apr', value:0}, {label:'May', value:0}, {label:'June', value:0}, {label:'Jul', value:0}, {label:'Aug', value:0}, {label:'Sep', value:0}, {label:'Oct', value:0}, {label:'Nov', value:0}, {label:'Dec', value:0}, ] const [data, setData] = useState(chartDataPoints) for (const expense of props.expenses){ const expenseMonth = expense.date.getMonth();// it gives the month in index; chartDataPoints[expenseMonth].value += expense.amount //we use the index of month from above statement } return( <> <div className="Filter-container"> <div className="Filter-container-top"> <h3 className="Filter-container-h3">Filter By Year</h3> <Drop onRecieveClick = {recieveClick} selectedOne={props.selected}/> </div> <div className="Filter-container-bottom"> <Chart dataPoints={chartDataPoints} initialExpense={props.expenses}/> </div> </div> </> ) }