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

erichardson30 · Accepted Answer · 2016-09-07 15:51:03Z

2

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.

answered Sep 7, 2016 at 15:51

erichardson30

5,0548 gold badges29 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bekirsevki Over a year ago

Firstly, thank you for helps. I tried but it could not work successfully. It exceed memory in order to set state. Maybe I wrote wrong. Could you please share editing code with me? @erichardson30

bekirsevki Over a year ago

Thanks. I used your changes.

Collectives™ on Stack Overflow

Send data from child component to parent component in react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related