How to pass data from child component to its parent in ReactJS?

Question

How to pass data from child component to its parent in ReactJS?

I'm attempting to transfer data from a child component to its parent as follow:

const ParentComponent = React.createClass({

    getInitialState() {

        return {

            language: '',

        };

    },

    handleLanguageCode: function(langValue) {

        this.setState({language: langValue});

    },



    render() {

         return (

                <div className="col-sm-9" >

                    <SelectLanguage onSelectLanguage={this.handleLanguage}/> 

                </div>

        );

});

and here is the child component:

export const SelectLanguage = React.createClass({

    getInitialState: function(){

        return{

            selectedCode: '',

            selectedLanguage: '',

        };

    },



    handleLangChange: function (e) {

        var lang = this.state.selectedLanguage;

        var code = this.state.selectedCode;

        this.props.onSelectLanguage({selectedLanguage: lang});   

        this.props.onSelectLanguage({selectedCode: code});           

    },



    render() {

        var json = require("json!../languages.json");

        var jsonArray = json.languages;

        return (

            <div >

                <DropdownList ref='dropdown'

                    data={jsonArray} 

                    value={this.state.selectedLanguage}

                    caseSensitive={false} 

                    minLength={3}

                    filter='contains'

                    onChange={this.handleLangChange} />

            </div>            

        );

    }

});

Can anyone help me to find the problem?

reactjs

4 years ago by vishaljlf39

2 Answers

Login / Signup to Answer the Question.

Login Signup

**rahul07** · Answer 1 · 2021-06-03T09:59:54

Parent:



<div className="col-sm-9">

     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 

</div>

Child:



handleLangChange = () => {

    var lang = this.dropdown.value;

    this.props.onSelectLanguage(lang);            

}

**kshitijrana14** · Answer 2 · 2021-06-04T14:59:10

To pass data from child component to parent component
In Parent Component:

getData(val){

    // do not forget to bind getData in constructor

    console.log(val);

}

render(){

 return(<Child sendData={this.getData}/>);

}

In Child Component:

demoMethod(){

   this.props.sendData(value);

 }

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

How to pass data from child component to its parent in ReactJS?

2 Answers

Login / Signup to Answer the Question.