How to remove the value before the cursor - React

Question

I created a phone with React that stores the numbers in an input whether you press the keys or if you use the keyboard.

The phone works fine, but pressing the delete button or the backspace key always eliminates the last value in the chain.

I need the button and the backspace key to delete the value before the cursor position. If the position is 3 I want the buttons to eliminate the number 2 in the chain, if it is 5 that eliminates the 4 ... How to remove the value before the cursor?

Edit: I fix my problem thanks to @Seba99. This is the final code:

My phone component :

class Telefono extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numberClicked: '',
            inputContent: [],
            currentKey: '',
        };
        this.deleteClickNumber = this.deleteClickNumber.bind(this);
    }

    deletePrevNumber(){
        var string = this.state.inputContent.split("");
        var ctl = document.getElementById('inputTelephone');
        var startPos = ctl.selectionStart;
        var endPos = ctl.selectionEnd;
        string.splice((startPos - 1), 1);
        this.setState({
            inputContent: string.join(''),
            numberClicked: string.join(''),
        })
    }

    deleteClickNumber(evObject){
        this.change = setTimeout(() => {
            this.setState({
                addClickedBottoms: '',
            })
        }, 300)
        this.setState({
            currentKey: evObject.keyCode
        });
        if(this.state.addClickedBottoms === ''){
            this.setState({
                addClickedBottoms: 'clicked',
            })            
        }

        if (this.state.inputContent !== ''){
            this.deletePrevNumber();
        }  
    }


    render(){
        return(
            <div className="pad sb-content">
                <div className="dial-pad">
                    <div className="phoneString">
                        <input type="text" ref="inputTelephone" value={this.state.inputContent.toString()} onChange={this.handleKeyPress} onKeyDown={this.handleKeyDown}/>
                    </div>
                    <div className="digits">
                        <Numbers 
                            numbers={this.state.numbers} 
                            letters={this.state.letters}
                            addClicked={this.state.addClicked}  
                            updateNumber={this.updateNumber}
                            addClickedBottoms={this.state.addClickedBottoms}
                            deleteClickNumber={this.deleteClickNumber}
                        />
                    </div>

                    <div className="digits">
                        <div className="dig call"><Icon icon="telefono" className='ico-telefono'/><span>LLAMAR</span></div>
                    </div>
                </div>
            </div>
        );
    }
}

This is my delete button in my Numbers Component

<div onClick={this.props.deleteClickNumber}>
  <Icon icon="borrar" className='ico-borrar'/>
</div>``

Thanks a lot for the help

Answer 1

This is because slice(0,-1) always delete the last element in your array ...

As of documentation :

A negative index can be used, indicating an offset from the end of the sequence. slice(2,-1) extracts the third element through the second-to-last element in the sequence.

You should have a look at the sPlice function which deletes the number of element you want at the selected index :

this.state.inputContent.splice(IndexOfTheCursor, 1);
this.setState({
     inputContent: this.state.inputContent
})