React - this is undefined in constructor

Question

I am new to react and working on some exercises. Inside YTSearch when I am using this, i get a message that this is undefined. But the tutorial instructor which i am looking at has the same code and it is working for him. Can someone help?

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import YTSearch from 'youtube-api-search';

const API_KEY = "AIzaSyCDclF-xo-YjMt48H8WMsnebncKmU3jsQA";

class App extends Component {
    constructor(props){
        super(props);
        this.state = { 'videos' : []};
        YTSearch({ key: API_KEY, term: 'surfboards'}, function(data){
            console.log(data);
            console.log(this);
        });
    }

    render(){
        return <input />;
    }
}

ReactDOM.render(<App />, document.querySelector('.container'))

Mayank Shukla · Accepted Answer · 2017-03-20 05:05:59Z

1

Its a context issue, you forgot to bind the callback method, to use this keyword, you need to bind it, use this:

   constructor(props){
        super(props);
        this.state = { 'videos' : []};
        YTSearch({ key: API_KEY, term: 'surfboards'}, function(data){
              console.log(data);
              console.log(this);
           }.bind(this)
        );
    }

or use arrow function it will do this job for you, you don't need to worry about method binding, use this:

       constructor(props){
            super(props);
            this.state = { 'videos' : []};
            YTSearch({ key: API_KEY, term: 'surfboards'}, (data)=>{
                  console.log(data);
                  console.log(this);
            });
        }

answered Mar 20, 2017 at 5:05

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - this is undefined in constructor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related