How to push data into object - reactjs

Question

I am trying to push the {database, id} to the end of the databaseChanges object which will be stored in a state variable as I want to access all of them. However I am getting undefined when I try to set it a new state variable (setDatabaseArr).
Here is my code:
const UnitTestsDatabaseView = props => {
const [databaseArr, setDatabaseArr] = useState('')
const addToProduction = test => () => {
const databaseChanges = props.unitTestsData.map(test => {
return {
"unit_test_id": test.id,
"databases": test.databases
}
})
const { databases, id } = test
console.log(databases, id)
databaseChanges.push(databases, id)
setDatabaseArr(databases, id)
console.log( setDatabaseArr(databases, id))
console.log( databaseChanges.push(databases, id))
}
return (
<div>
<div className='Card' style={{marginTop: '40px', overflow: 'hidden'}}>
<div className='TableTopbar UnitTestsGrid'>
<div>ID</div>
<div>Name</div>
<div>Database</div>
<div />
</div>
{props.unitTestsData && props.unitTestsData.map(test =>
<div key={test.id} className='Table UnitTestsGrid' style={{overflow: 'hidden'}}>
<div>{test.id}</div>
<div>{test.unit_test_name}</div>
<div>{test.databases}
<div>
<Checkbox
mainColor
changeHandler={addToProduction(test)}
data={{}}
id={test.id}
/>
</div>
</div>
</div>
)}
</div>
</div>
)
}
export default withRouter(UnitTestsDatabaseView)

Answer 1

I review your code, It seems there is a problem with the implementation on how to push a value to the state.
I tried to reproduce the problem and try to implement of which I think a solution.
And here is the code
import React, { useState, useEffect } from "react";
import { Checkbox } from "#material-ui/core";
// In order to reproduce the propblem
// Lets that these are the values of the unitTestsData props
// and instead of passing this as value of a props
// I defined it right here.
const unitTestsData = [
{ id: 1, unit_test_name: "Unit I", databases: "test1" },
{ id: 2, unit_test_name: "Unit II", databases: "test2" },
{ id: 3, unit_test_name: "Unit III", databases: "test3" }
];
const UnitTestsDatabaseView = () => {
const [databaseArr, setDatabaseArr] = useState([]);
// Maybe you want to push data if the checkbox is checked
// and pop the data if checkbox is unchecked :: Yes ???
// This is how you do it.
const addToProduction = ({ target }, { id, databases }) => {
setDatabaseArr((previousState) => {
let newState = [...previousState];
if (target.checked) {
newState = [
...newState,
{ unit_test_id: newState.length + 1, databases }
];
} else {
const i = newState.findIndex(({ unit_test_id }) => unit_test_id === id);
if (i !== -1) newState.splice(i, 1);
}
return newState;
});
};
useEffect(() => {
console.log("databaseArr", databaseArr);
}, [databaseArr]);
return (
<div>
<div className="Card" style={{ marginTop: "40px", overflow: "hidden" }}>
<div className="TableTopbar UnitTestsGrid">
<div>ID</div>
<div>Name</div>
<div>Database</div>
</div>
{unitTestsData.map((test) => {
const { id, unit_test_name, databases } = test;
return (
<div
key={id}
className="Table UnitTestsGrid"
style={{ overflow: "hidden" }}
>
<div>{id}</div>
<div>{unit_test_name}</div>
<div>
{databases}
<div>
<Checkbox
color="secondary"
onChange={(e) => addToProduction(e, test)}
data={{}}
id={id.toString()}
/>
</div>
</div>
</div>
);
})}
</div>
</div>
);
};
export default UnitTestsDatabaseView;
You may click the codesandbox link to see the demo
https://codesandbox.io/s/pushing-value-49f31