• I passed a prop to a child component.
• The prop send an object to the child component.
• In the child component I have an array of objects.
• Then I use the passed prop object and loop through it under a certain condition.
• When that condition is met then I make some changes to the Array of Objects present in the child component itself.

Now I want to use the useState in a way that when the changes are made to the array of objects in the child prop I want these changes to be added on top of its old version rather then a new array of objects only showing the changes made.

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

The above code passes the prop to child component named Filter

The below code is of the child component that recieves the prop

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>

        </>
    )
}