How to work with confirm in react?

Question

Drupal

Alert, prompt work fine, but confirm gives an error? What is the feature?

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: [
                {
                    title: 'First',
                    task: 'Wash car',
                    isDone: false,
                },
                {
                    title: 'Second',
                    task: 'Go to store',
                    isDone: false,
                }
            ]
        };
        this.deleteItem = this.deleteItem.bind(this);
    }
    deleteItem(event) {
        //Here I want to add confirm like that 
        // let conf = confirm('sure?'); if(conf) ...
        let number = event.target.parentNode.getAttribute('data-key');
        let newTodo = this.state.todos.slice();
        newTodo.splice(number, 1);
        this.setState({
            todos: newTodo,
        })
    }
    render() {
        return (
                <div>
                    <div className="header-app">
                        <h1>My ToDo app with React</h1>
                        <button onClick={this.showAddItem}>+</button>
                        <div className={(!this.state.isHidden ? 'hide_menu' : '') + " header-block"}>
                            <input id="title" type="text" placeholder="title"
                                   value={this.state.title}
                                   onChange={this.valueTitle}/>
                            <input id='task' type="text" placeholder="task"
                                   value={this.state.task}
                                   onChange={this.valueText}/>
                            <input id='submit' type='submit' value="Add"
                                    onClick={this.addItem}
                            />
                        </div>
                     </div>
                    <div className="body-app">
                        <div className="block-todo">
                            <div>
                                {this.state.todos.map((item, index) =>
                                    <div className={item.isDone ? 'opacity_small' : '' + ' itemTodo'} key={index} data-key={index}>
                                        <Title value={item.title} />
                                        <Task value={item.task}/>
                                        <Done onClick={this.isChecked} />
                                        <Remove onClick={this.deleteItem}/>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="footer-app">
                        Footer
                    </div>
            </div>
        )
    }
}

Answer 1

Problem solved. I downloaded a new kernel archive, made a copy, with the replacement of the includes folder - after that the error disappeared.

Answer 2

take a look here fiddle . everything seems to be working fine

deleteItem(event) {
    const conf = confirm(`Are you sure?`);
    let number = parseFloat(event.target.parentNode.getAttribute("data-key"));
    let newTodos = this.state.todos;
    if (conf) {
      newTodos = newTodos.splice(newTodos.indexOf(number), 1);
      this.setState({ todos: newTodos });
    } else {
      alert(`ok we won't delete it `);
    }
  }

and why not drop index directly from .map(). would be much more correct than looking in attributes
React doesn't recommend that you store data in DOM attributes. Even if you have, data attributes are probably the better approach, but in most cases the data should be stored in the state of the react component or external stores.