CODEWITHSUNDEEP
javascriptreactjstypescript
bekirsevki
bekirsevki

Reputation: 321

Send data from child component to parent component in react js

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>
        );
    }
}

Upvotes: 0

Views: 951

Answers (1)

erichardson30
erichardson30

Reputation: 5044

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.

Upvotes: 2

Related Questions