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
– Mohd Sabban, Commented Mar 30, 2021 at 11:12

sakshya73 · Accepted Answer · 2021-03-30 11:25:02Z

1

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

answered Mar 30, 2021 at 11:25

sakshya73

7,3916 gold badges28 silver badges49 bronze badges

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

Comments

Rishabh Singh · Accepted Answer · 2021-03-30 11:56:44Z

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;

Collectives™ on Stack Overflow

change on of nested array object in react state

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related