CODEWITHSUNDEEP
typescriptmobx-react
Anthony Kong
Anthony Kong

Reputation: 40624

How to discover a mobx observer's properties in a browser's dev console?

In the project I am working dependency injection is used very extensively.

There are code like this

type BigWidget = {
   title: string,
}


const AProps = {
  b: BigWidget
}

class A extends React.Component<AProps> {
  ...
}

...
const a = <A b={observerB} />

The problem with prop b above is that it could be created in many ways

import * as mobxReact from 'mobx-react';
const observerB = mboxReact.observer( { title }: { title: string } ) => {...}

or 

const anotherObserverB = mboxReact.observer( { title, extraFunction }:
    { title: string, extraFunction:() => void } ) => {...}

I want to be able to identify what object has been passed to prop b. Is there an easy to tell, for example, the observer has a prop extraFunction or not in dev console?

Currently if I type a in the console, it is all I can see

enter image description here

and it is not very informative.

Upvotes: 0

Views: 93

Answers (1)

basarat
basarat

Reputation: 276191

Simplified code that will compile: 

export type AProps = {
  b: any
}

export class A extends React.Component<AProps> {
  render() {
    return <div />
  }
}

const observerB = observer(() => { return <div /> });

const a = <A b={observerB} />

Now you want to know what is the value of b passed to a. Its available under props: 

console.log(a.props['b'] === observerB); // True

Full code

export type AProps = {
  b: any
}

export class A extends React.Component<AProps> {
  render() {
    return <div />
  }
}

const observerB = observer(() => { return <div /> });

const a = <A b={observerB} />
console.log(a); // What you have 
console.log(a.props['b'] === observerB); // True

Upvotes: 1

Related Questions