Develop Reference

React Javascript - Visual Studio Code doesn't auto-complete object properties

I have a React HOC that propagate an instance of a class to the children.
import React from "react";
import ObjContext from "../../context/Obj/ObjContext";
const withObj = (Component) => (props) => (
<ObjContext.Consumer>
{(obj) => <Component {...props} obj={obj} />}
</ObjContext.Consumer>
);
export default withObj;
Now, if in one of the child, I start coding, my code editor (VS Code Studio) doesn't display the properties of the object.
When I do props.obj. the editor doesn't show me all the stuff which is inside the object.
Instead, if I do const obj = new Obj() directly, I can see them.
Why is that? Is impossible to see the data which is inside the object that is propagated from a HOC and received via props?
Any workaround?
Thank you.

As said in the comments, the real answer here is TypeScript.
To see how your vs code editor would react with typescript, you can quickly do:
// Inside child component:
import Obj from 'path/to/obj'
...
export class ChildComponent extends React.Component {
this.obj: Obj;
constructor(props) {
super(props);
this.obj = this.pros.obj;
this.obj.something() // something would be proposed by ide
}
...
}
(Ofc the vs code will growl saying that types are not eligible in a .js file and you'd need .tsx instead, but for the purpose of taking a look at how TS would help with the auto-completion, its fine.

Beginner question struggling with React Component implementation getting strange "this" error

Beginner question struggling with React Component implementation.
I have tried everything in the cookbook on this error but no luck.
Expected 'this' to be used by class method 'aaaa'
What is wrong with his code:
import React from 'react';
class TestStuff extends React.Component {
constructor(props) {
super(props);
this.aaaa = this.aaaa.bind(this);
}
aaaa() {
console.log('dddddd');
}
render() {
return <div>test</div>;
}
}
export default TestStuff;

The warning is just saying, I see that you have this method in this class but it's not using any properties in the class. So either make it a static method or access a class property inside the method.
https://eslint.org/docs/rules/class-methods-use-this

Is there a way to execute code from a ES6 class file before it is even referenced it?

I'm not an expert on JS and I have inherited a React app with dozens and dozens of components.
I want to do something that in Java is trivial but I can't find the way in ES6.
I want to build a registry of most of those components and I'm looking for an approach to have each class register itself so it can be looked up dynamically by a key.
So I build a registry class like this
let registry = [];
export default class Registry {
static register(component) {
if (!registry.find(x => x.key == component.key))
registry.push(component);
}
}
And on each component class, I tried to register itself doing something like this:
import Registry from './Registry.jsx';
import React from 'react';
export default class Component extends React.Component {
... body of the component ...
}
Registry.register( { key: 'ComponentX', component: Component });
But it doesn't work because Registry is undefined.
In Java would be something like:
class Component {
....
static {
Registry.register('ComponentX',Component.class);
}
....
}
The only alternative I found is to create a static list of all components but that chokes with our current distributed approach to development
Thanks a lot
Edit
Thanks guys. I'd managed to get a step closer to the solution.
Using this:
let registry = new Map();
export function register(key, component) {
return registry.set(key, component);
}
import { register } from './Registry.jsx';
export default class Component extends React.Component {
static entry = register(key, component);
... body of the class ...
}
Using this scheme, the register function is invoked but the registry variable is undefined. I just need to find out how to have it defined at the time of the invocation of the register function.

import or require React components dynamically

I'm trying to import / require components dynamically, but somehow when I do it React complains. The require function does find it, but React throws an error saying it is missing some functions 't' etc.. All of this in an electron app.
I have a wizard setup (that is working, but not so elegant I think), where each page has it's own layout and jsx component. If I'd like to add a new page, I don't want to manage x-number of files, and at the moment I have to due to the setup I have currently. Below you can find what I want to achieve and what I'm doing now to achieve it. If there are any suggestions, code smells or better options please let me know as I'm quite new to React and ES2015 (as I'm from a C# background).
What I'm trying to achieve
export default class WizardPageContainer extends Component {
// Constructor
constructor(props) {
super(props);
}
// Render
render() {
const WizardPage = require(`./path/to/${this.props.step.id}`);
return (
<WizardPage step={this.props.step} />
);
}
}
How I'm currently doing it : which means I have to declare the imports / files first on top of the "WizardPageContainer" component.. Which means extra work and prone to errors/forgetting things. I should add, this code is working now ok, but I don't think this is elegant/future proof:
/* PAGES */
import WizardPage_Welcome from './pages/0.wizard.welcome';
import WizardPage_SystemCheck from './pages/1.wizard.systemCheck';
import WizardPage_SignIn from './pages/2.wizard.signIn';
import WizardPage_ExamCode from './pages/3.wizard.examCode';
import WizardPage_TakeExamination from './pages/4.wizard.takeExamination';
import WizardPage_Close from './pages/5.wizard.close';
const pages = [
WizardPage_Welcome,
WizardPage_SystemCheck,
WizardPage_SignIn,
WizardPage_ExamCode,
WizardPage_TakeExamination,
WizardPage_Close
];
/*/********************************************************************///
/* ******************************************************************** */
/* COMPONENT */
export default class WizardPageContainer extends Component {
// Constructor
constructor(props) {
super(props);
}
// Render
render() {
const WizardPage = pages[`${this.props.step.id}`];
return (
<WizardPage step={this.props.step} />
);
}
}
/*/********************************************************************///

I think it is about the "default". i have problem like this. Can you check this code;
https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L10
Also you can check the example usage;
https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L26

Your const pages needs to be an object, not an array.
You can see a working version I made of this here:
https://github.com/Frazer/meteor-react-nav/blob/master/lib/jsx/App.jsx

Best advice: Use Webpack to handle your imports, it's way more efficient than we could ever be.

Replacing a React.createClass with extends React.Component

Facebook has suggested the future removal of React.createClass completely in favour of ES6 classes. I'm now beginning to go through my react.js classes and replace them with the now accepted class MyClass extends React.Component syntax. However, I don't think I'm quite there yet on some things. I have coded the following API mount and gulp doesn't seem to like this particular module when loading: Cannot find module '.components/ticker-trader' from '/.../src'.
My particular class is outlined as:
import React, { Component, PropTypes } from 'react';
class TickerTrader extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
$.get("api_url", function(data) {
this.setState(data),
});
}
render() {
return (
<div></div>
);
}
}
export default TickerTrader;
Could anyone outline where exactly this has gone wrong...I'm sure it is something simplisitic. I have attempted to fix this by using the documentation but I don't seem to be getting anywhere...

Check your file paths.
Cannot find module '.components/ticker-trader' from '/.../src'
That looks wrong.
Instead of .components/ticker-trader it more than likely should be looking for ./components/ticker-trader.