How to add to iterate array setState in React

Question

I have a react component like

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      data =[
        {key=0,name="abc",value="123"},
        {key=1,name="def",value="456"},
        {key=2,name="ghi",value="789"}
      ]
    }
  }

  renameArrayKeys = (key) => {
    this.setState(oldState => {
      return {
        data: oldState.data.map((item, index) => item.key= index + 1)
      }
    })
  }
  render() {     
    return(
      <button onClick={this.renameArrayKeys}> Click Me </button>
    )
  }
}

What I want is finally my data in state should look like:

data =[
    {key=1,name="abc",value="123"},
    {key=2,name="def",value="456"},
    {key=3,name="ghi",value="789"}
]

Can somebody review my code and tell me what is wrong here as I am not able to get desired data. The value of the key in my array is not changing.

Inside Constructor, this.state: { data =[ {key:0,name:"abc",value:"123"}, {key:1,name:"def",value:"456"}, {key:2,name:"ghi",value:"789"} ] } Use : instead of = — Jeevan
– Jeevan, Commented Jan 21, 2018 at 9:44

Ori Drori · Accepted Answer · 2018-01-21 10:07:50Z

2

Array#map should return an object, and not the results of the key assignment. You can use Object#assign to add the key, and return a new object.

    class MyApp extends React.Component {
      constructor(props) {
        super(props)

        this.state = {
          data: [
            {key: 0,name="abc",value="123"},
            {key: 1,name="def",value="456"},
            {key: 2,name="ghi",value="789"}
          ]
        }
      }

      renameArrayKeys = (key) => {
        this.setState(oldState => {
          return {
            // create a new item object with the new key
            data: oldState.data.map((item, index) => Object.assign({}, item,    {
              key: index + 1
            }))
          }
        })
      }
      render() {
        return (
            <button onClick={this.renameArrayKeys}> Click Me </button>
        )
      }
    }

edited Jan 21, 2018 at 10:07

answered Jan 21, 2018 at 10:01

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Idan Beker · Accepted Answer · 2018-01-21 10:08:53Z

The mapping function returns a new object after modifying it, thus assigning a value in the mapping function does not make sense (It retuns the assignment value and not the modified object). This is more of a javascript question then react, since the only thing that is wrong is the mapping function.

I've modified this part and added some insights.

data =[
        {key:0,name:"abc",value:"123"},
        {key:1,name:"def",value:"456"},
        {key:2,name:"ghi",value:"789"}
        ]
       
// This all evaluates to just the numbers since you are turning all the items into a javascript initialization command, which returns its value.
const yourOutput = data.map((item, index) => item.key = index + 1) 


// What you should do is make the mapping change just the specific key that you want
// There are many ways to do it, this is my way.
const output =  data.map((item,index)=>({...item,key:index+1}))

console.log(yourOutput)
console.log(output)

Jeevan · Accepted Answer · 2018-01-21 10:06:12Z

1

Easy Way

let updateData = [];
  this.state.data.map((item, index) => {
    updateData.push({
      key: item.key+1, name: item.name, value: item.value,
    });
  });

 this.setState({ data: updatedData });

answered Jan 21, 2018 at 10:06

Jeevan

3574 silver badges18 bronze badges

Comments

Amir Mohammad Moradi · Accepted Answer · 2018-01-21 10:07:52Z

It seems your map(...) structure is wrong!

map function isn't a place for change something using '='. this just will return an array and you should assign whole objects to it.

try this:

class MyApp extends React.Component{
  constructor(props) {
    super(props);
     this.state = {
      data =[
        {key=0,name="abc",value="123"},
        {key=1,name="def",value="456"},
        {key=2,name="ghi",value="789"}
      ]
    }
    this.renameArrayKeys = this.renameArrayKeys.bind(this)
  }

  renameArrayKeys(key){
    this.setState(oldState => {
      oldState.data = oldState.data.map((item, index) => 
        { key: index+1, name = item.name, value = item.value }
      return oldState
    })
  }
  render() {     
    return(
      <button onClick={this.renameArrayKeys}> Click Me </button>
    )
  }
}

and you can use es6 style for object and array assign like this :

oldState.data.map((item, index) => { ...item, key: index+1}

Collectives™ on Stack Overflow

How to add to iterate array setState in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related