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 ponent 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 ponent is clicked it will make a function call which will send the value of i of the clicked ponent 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>
  );
}

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 ponent 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 ponent is clicked it will make a function call which will send the value of i of the clicked ponent 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>
  );
}

• javascript
• arrays
• reactjs
• jsx

Share Improve this question Follow asked Nov 28, 2019 at 12:45 random1234random1234 82744 gold badges1818 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 ponent 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.

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

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.