Advanced Search

Return to Snippet

Revision: 71037
at November 28, 2019 05:04 by heathbo
Updated Code 
renderUser = user => {
    return <User key={user.id} user={user} onClick={this.deleteUser} />;
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
          {this.state.users.map(this.renderUser)}
        </ul>
      </div>
    );
  }


// DON'T DO
return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

Revision: 71036
at December 8, 2016 09:05 by heathbo
Initial Code 
return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
How to pass a parameter into a method from an onClick method found in the render method.

Majority of the times when you need to do this, your adding it through a loop.  In this case, call a function where the item in the loop will automatically be passed into the function.  This will prevent the component from re-rendering every-time  it's parent changes and none of it's props or state changed.

** DO NOT DO **
Adding the code below marked with DON'T DO, will cause this component to re-render every-time it's parent changes, regardless of whether this components state or props changed.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
React: Pass value to method from onClick

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript