react this.props.function is undefined even I bind

Question

I am pretty much struggling with this. React keep saying my function is undefined but the function is working.

I have a parent component and a child component, I want to pass down a function from parent to child. This is what I did:

parent :

    import React, { Component } from 'react';
    import { Child } from 'components';

    export default class Parent extends Component{ 
        constructor(props){
           super(props);
           this.myFunc = this.myFunc.bind(this); 
        }

        myFunc (data) {
           console.log("wowow I got you!", data)
        }

       render(){
        return (
           <div>
              <Child thatFunc={this.myFunc} />
           </div>
        )
       }
    }

child:

    import React, { Component } from 'react';

    export default class Child extends Component {
          constructor(props) {
               super(props);
          }

          componentDidMount(){
               this.props.thatFunc("i got the function!")
          }

          render(){
             return (
                <div> do this do that </div>
             )
          }
    }

So I do get the console.log correct as " wowow I got you i got the function!". But, I got this as well: Uncaught TypeError: this.props.thatFun is not a function

Does anyone knows why?Thankkkk you!

Answer 1

The code WORKS. It was an unrelated bug. I have a list of children and I just need ONE child to be able to get this function, but I didn't filter it properly. How silly! Thank you so much for your attention, the code works just fine. I will close this question.