how to add function on event onclick on array.map in react js

Question

class ProjectFirestoreData extends Component {
    constructor(props) {
        super(props);
        this.userDelete = this.userDelete.bind(this)
    }
    userDelete(authorId){
        console.log(authorId)
    }
    render() {
        let {firestore} = this.props;
        if(!Array.isArray(firestore) || !firestore.length ){
            return (
                    <div>
                        <h1>Loading</h1>
                    </div>
                )
        }
        else{
            return (
                    <div className="col-md-8">
                        <div className="row">
                            {
                                firestore.map(function(index, elem) {
                                    return (
                                        <div className="col-md-6 p-3" key={index.name}  >
                                            <div className="card">
                                              <img className="card-img-top" src="..." alt="Card" />
                                              <div className="card-body">
                                                <h5 className="card-title text-dark">AuthorName is :  {index.authorFirstName} </h5>
                                                <p className="card-text text-dark">Some quick example text to build on the card title and make up the bulk of the card's content.
                                                </p>
                                                <Link to={`/userdetails/${index.authorId}`} className="btn btn-primary">Show Full Data</Link>
                                                <button type="button" class="btn btn-dark" onClick={() => this.userDelete(index.authorId)}>Dark</button>
                                              </div>
                                            </div>
                                        </div>

                                        )
                                })
                            }


                        </div>
                    </div>
                )
        }
    }

}

onclick event is working after the array.map , but it is not working under the array.map is there any way of achieving it ? i have tried adding

<button type="button" class="btn btn-dark" onClick={() =>this.userDelete(index.authorId)}>Dark</button>

after array.map and it is working fine . but under array.map it is not working . the error says

TypeError: Cannot read property 'userDelete' of undefined

Shmili Breuer · Accepted Answer · 2020-02-10 15:08:03Z

5

By passing a regular function to the map you lose the this context (a regular functions' this referrers to the current function), and since your userDelete function is outside of the map callback function userDelete is undefined, if you change the map callback function to an arrow function you retain the this scope of the class therefore userDelete is still in scope.

Change firestore.map(function(index, elem) { to firestore.map((index, elem) => { this should keep the proper this scope.

edited Feb 10, 2020 at 15:08

answered Feb 10, 2020 at 15:00

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samair ali Over a year ago

awesome ... solution was very easy but i was not getting the logic of this .. thanks :) it is solved now

Shmili Breuer Over a year ago

See my update for a brief explanation of the logic.

Nimantha · Accepted Answer · 2022-02-05 05:18:33Z

onclick event inside map:

 <div className={styles.file_content_show}>
                            {this.state.fileinformation.map((item)=>{ 
                                    return (
                                      
                                      <p className={styles.file_name_show}>{item.file_name}
                                      <span className={styles.file_size_date}> ({item.file_size} | {item.file_modified_date}) <img src={attachmentdelete_logo} className={styles.attachmentdelete_logo} onClick={this.deleteattachment.bind(item.file_size)}/></span>
                                      </p>
                                    );    
                                    
                                  })}
                                 
                                  
                                </div>

Function is this:

@autobind
private deleteattachment(file){
  var a=file;
}

Collectives™ on Stack Overflow

how to add function on event onclick on array.map in react js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related