Updating nested states in reactjs

Question

I have this state which is nested and I am having difficulty in setting state. Error:undefined is not an object (evaluating this.state.form) My initial state is :

this.state={
    activePage:0,
    visible:false,
    questionType:null,
    form:{
        title:'',
        description:'',
        pages:[{
            title:'',
            description:'',
            questions:[

            ]
        }]
    }
};

Now every time a user clicks, I need to add more object to pages array which should be having a title (''), description ('') and questions (empty list). I tried achieving this but it doesn't seem to be working.

let newForm={
     ...this.state,
     form:{
          ...this.state.form,
          pages:[
               ...this.state.form.pages,
               pageData
          ]
     }
 };
 console.log('newForm',newForm);
 this.setState({
     form:newForm
 });

This is how my pageData looks like

let pageData={
    title:'',
    description:'',
    questions:[]
};

"Doesn't seem to be working" - what's the specific issue?

Jayce444
– Jayce444

2019-02-08 05:24:02 +00:00
Commented Feb 8, 2019 at 5:24 — Jayce444
– Jayce444, Commented Feb 8, 2019 at 5:24
undefined is not an obect (evaluating this.state.form)

satya jha
– satya jha

2019-02-08 05:26:05 +00:00
Commented Feb 8, 2019 at 5:26 — satya jha
– satya jha, Commented Feb 8, 2019 at 5:26

adiga · Accepted Answer · 2019-02-08 05:27:01Z

1

You are setting the entire state in newForm. Just limit it to the form object:

let newForm = {
  ...this.state.form,
  pages: [
    ...this.state.form.pages,
    pageData
  ]
};

console.log('newForm', newForm);

this.setState({
  form: newForm
});

answered Feb 8, 2019 at 5:27

adiga

35.4k9 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crashalot Over a year ago

Hi adiga are you interested in small JavaScript consulting jobs? More details: myhotpot.io/jobs. For instance ,we would like to outsource a parser for extracting gradients from background-images. Please say when you have read this, and so this comment can get deleted. Thanks!

Praveen Rao Chavan.G · Accepted Answer · 2019-02-08 05:37:12Z

1

Whenever you see yourself in a situation where your state is getting complex or nested it means you should be rethinking you component structure, I mean you should be bringing in more granular components to manage their own state.

so why not move form object in your state to a different component completely.

I recommend creating a separate component for form object and let the form component manage the form state.

import React, { Component } from 'react';

class form extends Component {
    state = {
      form:{
            title:'',
            description:'',
            pages:[{
                title:'',
                description:'',
                questions:[

                ]
            }]
        }
    }

    render() {
    //Form content
    }
}

export default form;

more granular your components are more easy to manage and that's exactly the way you should be doing things in React.

edited Feb 8, 2019 at 5:37

answered Feb 8, 2019 at 5:33

Collectives™ on Stack Overflow

Updating nested states in reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related