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

Question

I'm trying to send data from a child component to its parent component like this:

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

This is the subcomponent:

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

What I need is to get the user selected value in the parent component. I get this error:

Uncaught TypeError: this.props.onSelectLanguage is not a function

Can anyone help me figure out the problem?

P.S. subcomponent is creating a dropdown from a json file, I need the dropdown to display two elements of a json array next to each other (eg: "aaa,english" as preferred!)

{
   "languages":[
      [
         "aaa",
         "english"
      ],
      [
         "aab",
         "swedish"
      ],
}

Answer 1

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 components:

demoMethod(){
   this.props.sendData(value);
 }

Answer 2

This should work. When sending the prop back, you are sending it as an object instead of sending it as a value or using it as an object in the parent component. Second, you need to format the json object to contain name value pairs and use the DropdownList

's valueField and textField properties

Short answer

Father:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

child:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

---

detailed:

edit:

Considering that React.createClass has been deprecated since v16.0, it is best to create React components by extending React.Component. Passing data from child component to parent component using this syntax will look like this

Father

class ParentComponent extends React.Component {

    state = { language: '' }

    handleLanguage = (langValue) => {
        this.setState({language: langValue});
    }

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        )
     }
}

child

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

export class SelectLanguage extends React.Component {
    state = {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        }

    handleLangChange = () => {
        var lang = this.dropdown.value;
        this.props.onSelectLanguage(lang);            
    }

    render() {
        return (
            <div>
                <DropdownList ref={(ref) => this.dropdown = ref}
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
}

---

Use the createClass syntax that the OP used in his answer Father

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

child

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

export const SelectLanguage = React.createClass({
    getInitialState: function() {
        return {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        };
    },

    handleLangChange: function () {
        var lang = this.refs.dropdown.value;
        this.props.onSelectLanguage(lang);            
    },

    render() {

        return (
            <div>
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

JSON：

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}