this.props.filterUser is not a function

Question

I am trying to pass data from chid to parent but I've been thrown below exception this.props.filterUser is not a function

I am referencing: ReactJS with ES6: this.props is not a function when I communicate two components

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

class Mobile extends React.Component {

    constructor() {
        super();
        this.legendBtnHandler = this.legendBtnHandler.bind(this);
        this.state = {
            mobileExtentions: '',
            legendInfo: '',
            buttonName: 'test'
        }
    };

 componentWillMount(){
        const listItems = mobileExt.map((ext) =>
            <p>
                <RaisedButton label={ext.name} secondary={true} id="mobileBtn" onClick={() => this.legendBtnHandler(ext.name)}/>
            </p>
        );

        this.setState({mobileExtentions: listItems});
    };


    legendBtnHandler(btnName){
        this.setState({buttonName: btnName});
        Store.buttonName = btnName;
        this.props.filterUser("test");
    };


    render(){
        const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
        return(
            <div>
               <DraggableCard
                   mobileExtentions = { this.state.mobileExtentions }
                   legendInfo = { mobileExt[0].legendInfo }
               />
            </div>
        )
    }
};

Parent

class MapClass extends React.Component {
    constructor(props) {
         super(props);
         this.filterUser = this.filterUser.bind(this);

            this.state =  {
                filter: ''
                //btnName: Legend.props.test
            }

        }

     filterUser(filterValue){
            alert(filterValue)
            this.setState({
                filter: filterValue
            });
        }

    render(){
        return(
           <Mobile filterUser={this.filterUser}/>
        )
    }
}

If you try to pass something else like here `` could you tell what the output if you check it int your `componentWillMount()` functon, like just adding `console.log(this.props)`? — DanilGholtsman, Feb 16 '18 at 07:05
Could it be because he is not passing `props` to `super` on `Mobile` component? — bennygenel, Feb 16 '18 at 07:22
@bennygenel, nope, as Shubham Khatri (thank you, btw) mentioned https://stackoverflow.com/questions/30571875/whats-the-difference-between-super-and-superprops-in-react-when-using-e — DanilGholtsman, Feb 16 '18 at 07:24
doesn't work, still throws "Uncaught TypeError: this.props.filterUser is not a function" — Explorer, Feb 18 '18 at 22:01

score 0 · Answer 1 · answered Feb 16 '18 at 07:15

0

Try the arrow syntax of a function, it will give you access to the right context

like legendBtnHandler = btnName => this.props.filterUser("test");

answered Feb 16 '18 at 07:15

Alexander Shtang

1,819
4
15
24

but he using the bind here `this.legendBtnHandler = this.legendBtnHandler.bind(this);`, shouldn't it be solving this kind of problem (with `this`)? – DanilGholtsman Feb 16 '18 at 07:20
Being trying to reproduce it like that https://i.imgur.com/KDhBZrf.png, but as you can see it sees the function in props. But, yes, I can mistaken too as well, because of `this.props` has the function it should in any case, I mean, without calling it inside `someInnerF` – DanilGholtsman Feb 16 '18 at 07:33
Yeah, you right, but we need more details about architecture of the app, to understand what's wrong. – Alexander Shtang Feb 16 '18 at 08:23
Oh, btw, there is `react-native` tag. Could it be something related to mobile platforms specific? – DanilGholtsman Feb 16 '18 at 08:59
Maybe. But looks like usual React class. – Alexander Shtang Feb 16 '18 at 09:14
Sorry for the late reply :( here's what I want to do: I want to pass Mobile class's RaisedButton onclick event to be listened by MapClass. I'm calling Mobile class from the navigation class. I've been try to achieve this in many other ways including refs, but that didn't work because of the dynamic behaviour of the button – Explorer Feb 18 '18 at 19:18
legendBtnHandler = btnName => this.props.filterUser("test"); didn't work either :( throws Uncaught TypeError: _this2.props.filterUser is not a function – Explorer Feb 18 '18 at 22:07

score 0 · Accepted Answer · answered Feb 18 '18 at 23:05

Thanks all for your kind reply. However the problem was that, I was calling the Mobile class in Navigation class (as well) and I haven't implement the filter function in Navigation.

reference: pass value from child to parent component in react

Matej Marić's comment was very useful

this.props.filterUser is not a function

2 Answers2