React incrementing variable within .map() function

Question

I am mapping through an array, and I want my variable i to be used as a unique key for my Components, however I do not know how (or where) to increment it correctly, if I add a {i++} within the <Component> tags then it will display the value of i on screen, and if I instead add {this.function(i)} and place the i++ inside the function, it will call the function but the variable i will reinitiate to the value of 0 everytime, so the key value will not be unique. I need the value of i to be the key for the component and it has to be incremented by 1 everytime, does anyone know how I can achieve this? Also, as you can see in the code, when the component is clicked it will make a function call which will send the value of i of the clicked component as a parameter to the called function.

Code:

  function(i) {
    console.log(i)
  }

  render() {

  var i = 0;
  var {array} = this.state;

  return (
    <div className="App">
    {array.map(item => (
      <Component key={i} onClick={(e) => this.function(i, e)}>
        <p>{item.name}</p>
      </Component>
    ))}
    </div>
  );
}

Nicholas Tower · Accepted Answer · 2019-11-28 12:48:58Z

2

The map function gets a second parameter which is the index of the element:

{array.map((item, i) => (
  <Component key={i} onClick={(e) => this.function(i, e)}>
    <p>{item.name}</p>
  </Component>
)}

Be aware that if you intend to sort this array or change its contents at runtime, then using array index as a key can cause some mistakes, as sometimes an old component will be mistake for a new one. If it's just a static array though, then using index as a key shouldn't be a problem.

answered Nov 28, 2019 at 12:48

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

1 Comment

random1234 Over a year ago

Oh my goodness, I feel so dumb, because I actually tried this method but I always used to get an error, and I just realized why, I always added the ) after i but never added the ( before item so I would close the parentheses without opening it....

Renaldo Balaj · Accepted Answer · 2019-11-28 12:48:53Z

2

.map already offer the increment, just add a second variable to the callback

  render() {
  var {array} = this.state;

  return (
    <div className="App">
    {array.map((item,i) => (
      <Component key={i} onClick={(e) => this.function(i, e)}>
        <p>{item.name}</p>
      </Component>
    ))}
    </div>
  );
}

answered Nov 28, 2019 at 12:48

Renaldo Balaj

2,45014 silver badges24 bronze badges

Comments

Aravind Kumar · Accepted Answer · 2019-11-28 12:53:45Z

1

You could try array.map((x, Key) => console.log(key)); .. In place of console.log you could add your code, it should work fine as per your requirement.

answered Nov 28, 2019 at 12:53

Aravind Kumar

113 bronze badges

Collectives™ on Stack Overflow

React incrementing variable within .map() function

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related