Confirm Window in React
Basically you're binding the function instead of calling it... you should bind beforehand, preferably in the constructor... then call it. Try this:
renderPosts() {
this.removeToCollection = this.removeToCollection.bind(this);
return _.map(this.state.catalogue, (catalogue, key) => {
return (
<div className="item col-md-3" key={key} id={key}>
<img src={this.state.catalogue[key].avatarURL} height={150} with={150}/>
<h3>{catalogue.marque}</h3>
<h4>{catalogue.numero}</h4>
<h4>{catalogue.reference}</h4>
<p>{catalogue.cote}</p>
<div className="text-center">
<button className="btn btn-danger" onClick={() => {if(window.confirm('Delete the item?')){this.removeToCollection(key, e)};}}>Supprimer</button>
</div>
</div>
)
})
}
You are just binding function and not calling it.
The right synatx to use bind
and called bind
ed function.
if (window.confirm("Delete the item?")) {
let removeToCollection = this.removeToCollection.bind(this, 11);//bind will return to reference to binded function and not call it.
removeToCollection();
}
OR you can do like this as well without bind.
if (window.confirm("Delete the item?")) {
this.removeToCollection(11);
}
If this is concern inside removeToCollection
then use arrow function
to define it.
removeToCollection=(key)=> {
console.log(key);
}
Working codesandbox demo