javascript - Send data from child component to parent component in react js -

i have dropdown menu using semantic-ui css framework. want select item on drowdown menu , know item selected. can know selected , set state in child component cannot send parent component. sent using callback function happened loop , exceed memory while setting parent's state. followed this way that.

my parent component "sorguview" , child component "dropdownitem"

thanks helps.

sorgu class:

export class sorgu {     _id:string;     username:string;     anasorgu:string;     aciklama:string;     sname:string;      constructor(id:string, username:string, anasorgu:string, aciklama:string, sname:string) {         this._id = id;         this.username = username;         this.anasorgu = anasorgu;         this.aciklama = aciklama;         this.sname=sname;     } } 

interface sorguprops:

export interface sorguprops {     sorgu:sorgu; } 

interface sorguprops:

export interface sorgustates {     sorgulist:array<sorgu>;     selectedname:string; } 

dropdownitem component (child):

class dropdownitem extends react.component<sorguprops,sorgustates> {       constructor(props: sorguprops, context: any) {         super(props, context);         this.state = {             selectedname: 'no-data'         } sorgustates;          this.calis = this.calis.bind(this);     }      calis = () => {         this.setstate({selectedname: $('.item.active.selected').text()},() => console.log(""));      }       render() {         console.log("states",this.state);         console.log("props",this.props);         this.props.myfunc(this.state.selectedname);         return (              <div classname="item" data-value={this.props.id} onclick={this.calis}>                  {this.props.name}              </div>          );     }  } 

sorguview (parent):

export class sorguview extends react.component<sorguprops,sorgustates> {       constructor(props: sorguprops, context: any) {         super(props, context);         this.state = {             sorgulist: [],             selectedname:''         } sorgustates;           this.hello=this.hello.bind(this);        }        hello(data){          console.log("data=>"+data);         //this.setstate({selectedname: data} sorgustates); //exceed memory         console.log("=>>>>"+ this.state.selectedname);      }      render(){          return (             <div classname="ui selection dropdown" ref="dropsorgu">                 <input type="hidden" name="selsorgu"/>                 <div classname="default text">seçiniz</div>                 <i classname="dropdown icon"></i>                 <div classname="menu">                      <dropdownitem name={this.state.sorgulist[0].sname} id={this.state.sorgulist[0].sname} myfunc={this.hello} />                  </div>             </div>         );     } } 

children components should "dumb" , should not alter state of component. should passed props , pass data parent if state needs altered.

you passing hello function prop myfunc correct. dropdown item should call function , pass necessary data way parent can set state of selected item.

calis = () => {     this.props.myfunc($('.item.active.selected').text()); } 

this call hello function in parent component , can set state there.