change on of nested array object in react state

Question

i want to replace the values of the nested array object like the below one, when button is clicked it will replace the old values of the x indexed object and set the new values there.

class compo extends React.Component {
    constructor() {
        super();
        this.state = {
            tabsData:[
               {
                  id:1,
                  title:"OldTitle1"
               },
               {
                  id:2,
                  title:"OldTitle2"
               }
            ],
        }
        this.changeTab = this.changeTab.bind(this)
    }
    changeTab(){
       const newData={
           id=3,
           title="New One"
       }
       //replace the above new data in the second object of nested array in state
    }
    render(){
        return(
            <button type="button" >Add</button>
        )
    ;}
}
export default compo

the state should be like this after

tabsData:[
      {
         id:1,
         title:"OldTitle"
      },
      {
         id:3,
         title:"New One"
      }
  ]

you want to replace the last index of tabs data.to do this, then pop element using arr. pop().it will pop the last element of the array and then push new data — Mohd Sabban, Mar 30 '21 at 11:12
Take a look at https://stackoverflow.com/questions/29537299/react-how-to-update-state-item1-in-state-using-setstate — Pablo Silió, Mar 30 '21 at 11:14

score 1 · Accepted Answer · answered Mar 30 '21 at 11:25

Not able to comment as my rep is less than 50...based on an idea of what you need here is the code.

https://codesandbox.io/s/brave-lumiere-dh9ry?file=/src/App.js

const [data, setData] = React.useState([
    {
      id: 1,
      title: "OldTitle1"
    },
    {
      id: 2,
      title: "OldTitle2"
    }
  ]);
  const newData = { id: 3, title: "New One" };

  const addData = () => {
    const newArr = data;
    newArr[1] = newData;
    console.log("newArr>>>>", newArr);
    setData([...newArr]);
  };

Rishabh Singh · Answer 2 · 2021-03-30T11:56:44.813

You could do something like this...

import React from "react";

class compo extends React.Component {
  constructor() {
    super();
    this.state = {
      tabsData: [
        {
          id: 1,
          title: "OldTitle1"
        },
        {
          id: 2,
          title: "OldTitle2"
        }
      ]
    };
    this.changeTab = this.changeTab.bind(this);
  }
  changeTab() {
    const newData = {
      id: 3,
      title: "New One"
    };
    // Make duplicate since you can't mutatue state
    let newTabData = [...this.state.tabsData];

    const id = 2; // id to be removed

    // CASE 1: If you want to maintain order
    const index = newTabData.findIndex((data) => data.id === id);
    if (index > -1) {
      // replace oldData with newData
      newTabData.splice(index, 1, newData);
    } else {
      // simply add newData at last
      newTabData.push(newData);
    }

    // CASE 2: If order doesn't matter
    // // remove oldData
    // newTabData = newTabData.filter((data) => data.id !== id);
    // // add new data at last
    // newTabData.push(newData);


    // finally update the state irrespective of any case
    this.setState({ tabsData: newTabData });
  }
  render() {
    return (
      <div>
        <button type="button">
          Add
        </button>
        <button type="button" onClick={this.changeTab}>
          Change
        </button>
        <br />
        {JSON.stringify(this.state, null, 2)}
      </div>
    );
  }
}
export default compo;

change on of nested array object in react state

2 Answers2