Say I have a parent component that renders multiple child components based on an array using .map() method. Using some inputs child component then creates an object which it returns with a callback function on state update.
const InputRows = () => {
const [incomeObj, setIncomeObj] = useState({});
const fruits= ['apple' , 'orange', 'banana', 'pineapple'];
return (
fruits.map((fruit, index)=>
<tr key={index}>
<InputRow fruit={fruit} number={index} setIncomeObj={setIncomeObj}/>
</tr>
)
What I need to do now is to store returned objects from all the child components inside one object to then send it out as JSON.
I've tried multiple ways to do it, for example something like using useEffect hook:
let combinedIncomeObj = {};
useEffect(() => {
Object.assign(combinedIncomeObj, incomeObj);
console.log(combinedIncomeObj);
}, [incomeObj]);
But of course it just replaces existing data in combinedIncomeObj on each state update, not adding to it. Is using state managers like Redux is the only way to achieve my goal? Or am I just missing something?
Update: I gave up and decided on building out my JSON object from input data upon submit - much easier and kind of makes more sense.
Send the data as array of objects like this [{ } , { } ] Just follow the below code
const InputRows = () => {
const [incomeObj, setIncomeObj] = useState([]);
const fruits= ['apple' , 'orange', 'banana', 'pineapple'];
const handleIncomeObj = (obj)=>{
setIncomeObj([...incomeObj,{...obj} ]);
}
return (
fruits.map((fruit, index)=>
<tr key={index}>
<InputRow fruit={fruit} number={index} setIncomeObj={obj=>hanleIncomeObj(obj)}/>
</tr>
)
I hope you find it helpful .
if you want to add to the object you can use spread syntax
let combinedIncomeObj = {};
useEffect(() => {
combinedIncomeObj = {...combinedIncomeObj, incomeObj}
console.log(combinedIncomeObj);
}, [incomeObj]);