js class returning undefined object

Question

I'm trying to import a class into a react class but when the object changes in the class it returns undefined.

class Test {
  constructor(){
    this.obj = {}
  }

  testFunc(){
    this.obj.one = 'two'
    // this returns the value
    console.log(this.obj.one)
  }
}

class App extends Component{
  constructor(){
    super()
    this.testClass = new Test()
  }

  componentDidMount(){
    this.testClass.testFunc()
    // this returns undefined
    console.log(this.testClass.obj.one)
  }
}

Are you sure? Are you saying `this.testClass.testFunc()` outputs `two` but `console.log(this.testClass.obj.one)` outputs `undefined`? because, removing the reactjs stuff from your code, it works just fine — Jaromanda X, Apr 23 '19 at 03:58
perhaps your not seeing a `2` on the console output which would mean `two` was sent to the console *twice* - and the `undefined` is from something else ... try `console.log('in componentDidMount', this.testClass.obj.one)` — Jaromanda X, Apr 23 '19 at 04:01
ok so if i do `console.log(this.testClass.obj)` chrome console will only show `{ }` but if i set a value in the Test class constructor `this.obj = {test:"test"}` that will show `{test:"test"}` in the chrome console — pablo, Apr 23 '19 at 04:06
Could it be that you are not binding the `testFunc` method to your `Test` class? Try adding this line to your constructor: `this.testFunc = this.testFunc.bind(this)` — kennyvh, Apr 23 '19 at 04:07
in the chrome console the values show if i expand the object — pablo, Apr 23 '19 at 04:13
Sounds like a typical async problem. You are accessing the property before it was set. Your actual code must be different. Please post a better example. But likely a duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086/218196). — Felix Kling, Apr 23 '19 at 04:23

ichadw · Answer 1 · 2019-04-23T04:17:21.190

I think you missing render on App Component:

  constructor(){
    this.obj = {};
  }

  testFunc() {
    this.obj.one = 'two';
    // this returns the value
    console.log(this.obj.one);
  }
}

class App extends React.Component{
  constructor(){
    super()
    this.testClass = new Test();
  }

  componentDidMount(){
    this.testClass.testFunc();
    console.log('value =>', this.testClass.obj.one);
  }

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

score 0 · Answer 2 · answered Apr 23 '19 at 05:14

0

I have done few tweaks. Your  code is working fine and returning the expected results.

you can check the fiddle:

JS Fiddle

answered Apr 23 '19 at 05:14

nadun

61
5

score -1 · Answer 3 · edited Apr 23 '19 at 04:39

-1

I think, if you want to use console.log(this.testClass.obj.one) you need to return this key work in testFunc() function

edited Apr 23 '19 at 04:39

Lalji Dhameliya

1,729
1
17
26

answered Apr 23 '19 at 04:20

Vexal

695
2
9
16

The `this` in the expression `this.testClass.obj.one` refers to the instance of `App`. If you return `this` from `testFunc`, you'd get an instance of `Test`. Since `App` already has an instance of `Test` assigned to `this.testClass` and that is the *same* instance that `this.testClass.testFunc()` would return, it's irrelevant if it does return it or not. – VLAZ Apr 23 '19 at 04:59

js class returning undefined object

3 Answers3