push state object into state array in reactJS application - reactjs

Question

I have a store file which contains states. I defined user like this:
user: store.getState().user || { jobRecord: [] },
What I want is to push some job objects into user.jobRecord. The job object is defined like this:
job: store.getState().job || { title: '', company: '', start_date:
'', end_date: '' }
So first of all, I set some value into job object and then push it into user.jobRecord.
const joined = user && user.jobRecord;
store.setState({
user: {
...user,
jobRecord: [...joined, job],
},
});
By doing this, I get type error:
TypeError: joined is not iterable
I try this to set just one record in it:
jobRecord: [job],
but the result of jobRecord is:
[object Object]
Thank you a lot for considering my issue.

Answer 1

You are checking for falsey value in store.getState().user which is actually an object. Therefore it will always be true and jobRecord would never be filled and [...user] would give error as you are destructuring on empty object.
user: store.getState().user || { jobRecord: [] },
To avoid this issue use Object.keys(this.state.user).length to check if object is empty or not.
Working code below:-
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
job: {},
user: {}
}
componentDidMount () {
let user= Object.keys(this.state.user).length || { jobRecord: [] };
let job= this.state.job || {
title: '',
company: '',
start_date: '',
end_date: ''
};
const joined = user && user.jobRecord;
this.setState({
user: {
...user,
jobRecord: [...joined, job],
},
});
}
render () {
console.log('inside user',this.state.user)
return (
<div className="App">
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

It is not possible to iterate undefined value
const joined = user && user.jobRecord assigns undefined value to joined variable when user or user.jobRecord in undefined
To fix it, please use following code instead:
const joined = user && user.jobRecord || [];