push state object into state array in reactJS application

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.

Unfortunately, this information is not enough to solve the problem. For example, what does store.setState does? Is it the same as useState's setter method? But, this is absolutely true: joined is not iterable. So it is not either an array or an object at that time. Try to log it and see if it is undefined or something else. — devserkan
– devserkan, Commented Sep 20, 2019 at 7:16
Yes, joined is undefined. What about the second try? I logged and the one job object set into user.jobRecord. I post it via api call to be stored in database, but it stores [object Object] — Zar Ashouri
– Zar Ashouri, Commented Sep 20, 2019 at 7:31
I couldn't understand how you set one job but seeing the jobRecored as [object Object] seems fine to me. Where do you check it? Developer console maybe? — devserkan
– devserkan, Commented Sep 20, 2019 at 7:39
@devserkan how does it seem fine while it doesn't show the containing of object? I check it by sending get request to my local server. — Zar Ashouri
– Zar Ashouri, Commented Sep 20, 2019 at 9:39
But how do you try to see it? It looks an array containing an object. Nevertheless, have you checked @tarzen chugh's answer? — devserkan
– devserkan, Commented Sep 20, 2019 at 9:51

tarzen chugh · Accepted Answer · 2019-09-20 07:55:20Z

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);

Andrii Muzalevskyi · Accepted Answer · 2019-09-20 10:33:04Z

0

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 || [];

edited Sep 20, 2019 at 10:33

Andrii Muzalevskyi

3,33918 silver badges23 bronze badges

answered Sep 20, 2019 at 7:57

Salman Mehmood

2832 silver badges6 bronze badges

Collectives™ on Stack Overflow

push state object into state array in reactJS application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related