Send data from child component to parent component in react js

Question

I have a dropdown menu by using Semantic-UI CSS Framework . I want to select an item on drowdown menu and know which item selected. I can know which is selected and set state in child component but I cannot send parent component. Actually I sent it by using callback function but it happened loop and exceed memory while setting parent's state. I followed this way for that.

My parent component is "SorguView" and also child component is "DropDownItem"

Thanks for 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'
        } as 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:''
        } as SorguStates;


        this.hello=this.hello.bind(this);



    }



    hello(data){

        console.log("data=>"+data);
        //this.setState({selectedName: data} as 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>
        );
    }
}

Answer 1

Children components should be "dumb" and should not alter the state of the component. They should simply be passed props and pass data back to the parent if the state needs to be altered.

You are passing the hello function as a prop myFunc which is correct. Dropdown item should then call that function and pass it the necessary data so that way the parent can set the state of the selected item.

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

This will call the hello function in the parent component and then you can set the state from there.