Weird bug in ReactJs - onClick event

Question

i want to get a value of an input but it appears theres something wrong that i cant figure it out.

import React, { Component } from 'react';
...   
      this.state = {
      json:JSON.parse(props.data),
      objet: '',
      id: '',
      click: function(click){
        var a = document.getElementById("click").value;
        alert(a);
        a = null;
      }
    };
 ...
     {this.state.json[1].map(i => (
       ...
        <input onClick={this.state.click} value={i.id} id="click" ></input>
       ...
      ))}

in the browser i see this :

the problem is when i click on one of the two inputs it alwaaays shows 2.

i can't see why it's not working Please help me out i'm stuck.

Answer 1

You have at least two different html elements with the same id ("click"). Because of that document.getElementById("click") may return element which you are not expecting. In order to fix this try to change id="click" on id={"click-" + i} and update the corresponding onClick function.