[Solved] ReactJs Uncaught TypeError: this.props.onChange is not a function. When Pass the values from Child Component to its Parent Component in ReactJS

Problem :

When I am trying to send variable data from child component class to its parent class. I’m getting the below error

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

Parent Component:

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

    render() {
        return (
            <div className="col-sm-4">
                <br></br>
                <h4 > Parent Component: </h4>   {this.state.language}
                <hr></hr>
                <div >
                    <SelectLanguage onSelectLanguage={this.handleLanguage} />
                </div>

            </div>

        );
    }

Child component

render() {
        return (
            <div className="col-sm-4">
                <br></br>
                <h4 > Parent Component: </h4>   {this.state.language}
                <hr></hr>
                <div >
                    <SelectLanguage onSelectLanguage={this.handleLanguage} />
                </div>

            </div>

        );

Solution:

Pass the values from Child Component to its Parent Component in ReactJS, I found several ways to solve this problem and we will learn all the approaches to pass the data from the child component to its parent in reactJs. make sure the handleLanguage() the function is declared in the ParentComponent.js file ?. or you can follow the below approach to pass value from the child component to its parent function.

Aprroach 1: using Refs and the DOM, pass data from child to its component

Step 1: Create a parent component function

In the below snippet I have created a function handleLanguage and passed the function as props to its child component like this

 <SelectLanguage onSelectLanguage={this.handleLanguage} />

So, the final version of the Parent ParentComponent.js component looks like below snippet

import React from 'react';
import SelectLanguage from './SelectLanguage';
export default class ParentComponent extends React.Component {

    state = {
        language: '--select-launguage--',
    };

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

    render() {
        return (
            <div className="col-sm-4">
                <br></br>
                <h4 > Parent Component: </h4>   {this.state.language}
                <hr></hr>
                <div >
                    <SelectLanguage onSelectLanguage={this.handleLanguage} />
                </div>

            </div>

        );
    }
}

Step 2 : Creating Refs

Refs are created using React.createRef() and attached to React elements via the attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

constructor() {
        super();
        this.myRef = React.createRef();
    }
render() {
        return (
            <div>
                <h5>Child Component : </h5>
                <select ref={this.myRef} onChange={this.handleLangChange}>
                <option selected='true'>--select-launguage--</option>
                    {jsonArray.map(ele =>
                        <option value={ele.lang}>{ele.lang}</option>
                    )}
                </select>
            </div>
        );
    }

Step 3: Accessing Refs and pass the value to it’s parent component function onSelectLanguage()

When a ref is passed to an element in render, a reference to the node becomes accessible at the current the attribute of the ref.

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

So, the final version of the Child component SelectLanguage.js looks like the below snippet

import React from 'react';
// var json = require("../passChildToParent/languages.json");
var jsonArray = [ 
    
        { 
        "code": "aaa", 
        "lang": "english" 
        }, 
        { 
        "code": "aab", 
        "lang": "Swedish" 
        }
      ] 
class SelectLanguage extends React.Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }
  
    handleLangChange = () => {
        var lang = this.myRef.current.value;
        this.props.onSelectLanguage(lang);
    }

    render() {
        return (
            <div>
                <h5>Child Component : </h5>
                <select ref={this.myRef} onChange={this.handleLangChange}>
                <option selected='true'>--select-launguage--</option>
                    {jsonArray.map(ele =>
                        <option value={ele.lang}>{ele.lang}</option>
                    )}
                </select>
            </div>
        );
    }
}
export default SelectLanguage

Conclusion:

We could pass values to the parent component from its child component via props, by calling this.props.parentMethod(value) in the child methods. Hope you find them helpful.

Default image
Shivaraju M
Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am currently focused on continuous improvement and agile project management.

Leave a Reply