handling nokia button continuous clicking using javascript

Question

i am designing the t9keyboard using bootstrap, css, html.I want to write a function for handling the continuos click events.For example, while clicking the 2 button the first time,function need to show 2.second time,a third time b,and the fourth time c.

please help me.

I used the following component file to achieve this:

  import React,{Component} from 'react';
  import './KeyBoard.css';
  var arr=[];
  var clickCount=0,
 arrLength=0;
class KeyBoard extends Component{

    handleClick(str){
console.log("handleClick called "+str);
    clearInterval();
arr=str.split('');
arrLength=arr.length;
if(clickCount>=arrLength){
    clickCount=0;
    clickCount++;
}
else{
    clickCount++;
}
setTimeout(function(){
    console.log("Timeout");
    document.getElementById("target").innerHTML=arr[clickCount];
    clickCount=0;
    arr=[];
},1000);
}

render(){
    return(
        <div className="container-fluid text-center">
        <div className="jumbotron jumbotron-fluid text-center center">
        <div className="container">
        <div className="col">
            <div className="list-group">
            <div className="list-group-item" id="target-list-item">
                <span id="target" ></span>
            </div>
            <div className="list-group-item">
            <div className="btn-group btn-group-lg row"  role="group" aria-label="Basic example">
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton" onClick={this.handleClick("1")}>1</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton" onClick={this.handleClick("2abc")}>2abc</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">3def</button>
            </div>
            </div>
            <div className="list-group-item">
            <div className="btn-group btn-group-lg row"  role="group" aria-label="Basic example">
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">4ghi</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">5jkl</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded"id="myButton">6mno</button>
            </div>
            </div>
            <div className="list-group-item">
            <div className="btn-group btn-group-lg row"  role="group" aria-label="Basic example">
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">7pqrs</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">8tuv</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">9wxyz</button>
            </div>
            </div>
            <div className="list-group-item">
            <div className="btn-group btn-group-lg row"  role="group" aria-label="Basic example">
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">*</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">0</button>
                <button type="button" className="btn btn-outline-primary col-4 rounded" id="myButton">#</button>
            </div>
            </div>
            </div>
         </div>   
         </div>
        </div>
        </div>
    );
}

}

export default KeyBoard;

It produces the following error: