Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

111
Views
Adding items in the nested array of React state

I'm trying to add new items to an array of an object that resides in another object of a state. Pretty nested.

So I tried the following way...

// The initial data
[options, setOptions] = useState({
    name: 'Name goes here'
    type: 'type goes here'
    series : [{
        type: 'series type',
        label: 'series label'

})

Now I want to add another object inside the object of series array with useEffect(). And I tried:

useEffect(() => {
    // other functionalities goes here
    setOptions({
        ...options, // for copying previous data outside of series
        series: [{
            ...options.series, //this is for copying previous data of series
            tooltip: {
                enable: true,
        }]
    })
}, [refreshData])

The way I'm copying ...options works absolutely fine, But when I try to copy ...options.series it adds a new copied object inside the object of series array like the following:

{
    name: 'Name goes here' //fine
    type: 'type goes here' //fine
    series: [{
        {type: 'series type', label: 'series label'}, //not fine
        tooltip: {enable: true} //not fine
        //what I want is: to have previous object data and tooltip appended as another item
    }]
}

The way I want the object to be is:

{
    name: 'Name goes here' //fine
    type: 'type goes here' //fine
    series: [{
        type: 'series type', 
        label: 'series label'
        tooltip: {enable: true}
    }]
}

Can Anybody help me regarding this. I would appreciate any help.. Thanks

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

here is sample of what you are trying to achieve .

const d = {
    name: 'Name goes here',
    type: 'type goes here',
    series : [{
        type: 'series type',
        label: 'series label'
  }]
}


const newD = {
    ...d,
    series: [
        {
          ...d.series[0], // problem is here
          tooltip: {
            enable: true,
          }
        }
      ]
  } 
console.log (newD)

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!