javascript - Trouble in passing prop to child -

i having problem passing props child element. have parent renders child(four times) having button. want execute "console.log(id);" everytime click button. problem onclick gets executed if don't click button. in console can see gets printed in once. here code. tagsbrief_array array of json objects.

parent component

export default class tagsbrief extends component{     handleclick(id){          console.log(id);     }     render() {         var populate = tagsbrief_array.map((value)=> {             return(                 <tagbriefitem id={value.id} onclick={this.handleclick} description={value.tag_name} percent={value.tag_percent}/>)         });         return (             <muithemeprovider>                 <div classname="tagsbrief">                     {populate}                 </div>             </muithemeprovider>         );     } } 

child component

export default class tagsbriefitem extends component {  render() {     return (         <muithemeprovider>             <button onclick={this.props.onclick(this.props.id)} style={{backgroundcolor: "#293c8e"}} classname="tagsbriefitem">                 <h2 style={styles.headline}>{this.props.description}</h2>                 <h3 style={styles.headline}>{this.props.percent}</h3>             </button>         </muithemeprovider>     ); } } 

<button onclick={this.props.onclick(this.props.id)} style={{backgroundcolor: "#293c8e"}} classname="tagsbriefitem">     <h2 style={styles.headline}>{this.props.description}</h2>     <h3 style={styles.headline}>{this.props.percent}</h3> </button> 

here passing result of onclick prop not function. that's why seeing logs result of call of onclick in turns calls parent's handleclick.

you can change onclick = { () => this.props.onclick(this.props.id)}