How can I setState for the nested array and objects?

Question

I need to save a data in this format:

categoryselect: 0: {
  {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
  }
},: 1: {
  {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
  }
},

Whenever I click new category I need to create a new object under categoryselect and if I click add new question I need to create an object under categoryselect[0].qustion[]. I tried like this but it doesn’t seem to do what I want:

this.setState({
  categoryselect: [
    this.state.categoryselect,
    {
      question: [
        ...this.state.categoryselect.question,
        addQuestion
      ]
    }
  ],
});

Any specific reason to choose categoryselect as an object with numeric keys ? — Sagar Jajoriya
– Sagar Jajoriya, Commented Dec 21, 2018 at 13:47
ya categoryselect must be separated as object when the user chooses newcategory is there any better solution ? — pageNotfoUnd
– pageNotfoUnd, Commented Dec 21, 2018 at 13:49
You treat it as an array in the next code block, so do you mean it is an array from the start? — trincot
– trincot, Commented Dec 21, 2018 at 13:51
ya if thats array it will be convenient can we do it using objects @trincot — pageNotfoUnd
– pageNotfoUnd, Commented Dec 21, 2018 at 13:55

trincot · Accepted Answer · 2018-12-24 08:32:08Z

1

Looks like categoryselect should really be an array, like this:

categoryselect: [{
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
}, {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
}]

This will use the same numerical keys, but on top of that you'll have a length property and array methods.

When a category needs to be added, just do:

this.setState({
    categoryselect: [...this.state.categoryselect, {
        question: [],
        cateName: 'checkbox'
        name: '',
        status: 1
    }]
});

... to add a question to the first category, do:

this.setState({
    categoryselect: Array.from(this.state.categoryselect, (cat, i) =>
        i != this.state.categoryselect.length-1 ? cat 
             : {...cat, ...{question: [...cat.question, addQuestion]}}
    ) 
});

edited Dec 24, 2018 at 8:32

answered Dec 21, 2018 at 14:05

trincot

357k38 gold badges282 silver badges338 bronze badges

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

5 Comments

pageNotfoUnd Over a year ago

it satisfies my half need the thing is when a new category is added , the question must be added in the newly created object but now it gets appended in previous category's question

pageNotfoUnd Over a year ago

Hi slightly modified the code i ===(thisArg>0 && thisArg.length-1) ? cat : {...cat, ...{question: [...cat.question, addQuestion]}} but now I, when i create a new question it gets added in all the categories @trincot

pageNotfoUnd Over a year ago

instead of arr i jus changed the name i got length of undefined so added thisArg>0

pageNotfoUnd Over a year ago

this.state = {       categoryselect:[           {             question :[],             cateName:'checkbox',             name:'',             status:1             } ], }

this way , i got arr.length of undefined

pageNotfoUnd Over a year ago

Only issue is while adding question it's getting appended in both category but for me it should get append in particular category

onkar.v · Accepted Answer · 2018-12-21 13:54:00Z

0

To create the object that you want you can use the following script -

 categoryselect = {
  0: {
   {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
   }
  },
  1: {
   {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
   }
  }
 }

var allCategories = categorySelect[Object.keys(categorySelect).length] = {
 question:[...this.state.categoryselect.question,
    addQuestion],
 cateName: 'checkbox'
 name: '',
 status: 1
}

this.setState({
 categoryselect: allCategories
});

answered Dec 21, 2018 at 13:54

onkar.v

1359 bronze badges

Collectives™ on Stack Overflow

How can I setState for the nested array and objects?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related