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
Related
Need to know how we are accessing the Lifecycle methods from React :
import React, { Component } from "react";
class App extends Component{
constructor() {
super();
this.state = {};
}
componentWillMount() {
//Theoretically we tell that this `componentWillMount` is dereived/extended from 'Component' Class ie, in above like `class App extends Component`
}
render() {
return (
<div>
...
</div>
);
}
};
Now the question is if you open the react source code file from here https://unpkg.com/react#18.2.0/umd/react.development.js
you do not find any abstract method like for componentWillMount
But if you open the react-dom file, https://unpkg.com/react-dom#18.2.0/umd/react-dom.development.js you can find the method, Question is Since we extent the Class with React.Component, we assume it is inside React library, not in ReactDOM, So not Clear How we are accessing the LifeCycle hooks from React library, which infact not available in that library
The magic seems to be in react-reconciler:
You can find typeof instance.componentDidMount === 'function' instances in here that seem to mark that the React fiber is in a phase where it needs to have that function called.
The function is then finally called here in ReactFiberCommitWork.
How those functions get called is more and more involved, and quite asynchronous too, likely.
I am trying to make use of a JSX.Element within a React application. The compiler is unhappy though.
I have two files Main.tsx and EmployeeMask.js. For some reason I am not sure of I cannot use EmployeeMask in its JSX form <EmployeeMask /> as it is not understood as a JSX component.
Here is my Main.tsx file:
export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}
Here is my EmployeeMask.js file:
import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}
The compiler tells me the following though:
(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)
I already tried adding export default EmployeeMask;, but this did not change anything.
Why does the compiler not recognize this as a JSX.Element?
You seem to be calling <EmployeeMask />, but the exported component's name is EmployeeMask2, which means it should be called like <EmployeeMask2 />.
This happens because it is a regular export (export class instead of export default class), so when you import it, you have to use something like import {EmployeeMask2} from '<path>/EmployeeMask.js'.
If you used a default export, you could call it however you want in your file, like:
import Whatever from '<path>/EmployeeMask.js'
I got the answer and wanted to post it here in case someone has had the same problem. I found this online TypeScript to JavaScript transpiler in which I could transpile a working TypeScript class into JavaScript in order to compare and find out what was the problem before.
Diffing the result with what I had showed that the import was the problem.
import React from 'react';
instead of
import * as React from 'react';
Correcting this by adding "* as " solves the problem and makes the class usable.
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.
So I have a BaseComponent.jsx that I extend on many of my components. This works great.
class BaseComponent extends React.Component {
constructor(props){
super(props)
this.something = true
}
}
class OtherComponent extends BaseComponent {
constructor(props){
super(props)
console.log(this.something) // true
}
}
But now I need to use withRouter(component) from react-router which wraps your component in a higher order component and decorates your class.
So I do this:
class OtherComponent extends BaseComponent {
constructor(props){
super(props)
console.log(this.something) // undefined
}
}
export default withRouter(OtherComponent)
The problem is that now I can't access the properties from BaseComponent and those return undefined.
How can I solve this so that I can create a HoC and at the same time access the properties of the base class?
Extending React components is discouraged by the React team. Even if it works on some instances, the results are unpredictable when doing fancier things such as higher order components.
General extending component classes should be avoided, and even if used, should not be used on "smart" connected components anyway – prefer composition over inheritance for React components.
And
You cannot implement a generic HoC that extends a component for the simple reason that the HoC has to work with all three forms of React component declaration.
Source: https://github.com/reactjs/react-router/issues/3514
So the answer to my question is simply that it can't be done and I should move to composition instead of inheritance.
I'm looking at using React with Typescript. On the official Typescript's website, one of their guides have this set of code for a component:
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export class Hello extends React.Component<HelloProps, {}> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
At this line:
export class Hello extends React.Component<HelloProps, {}>
I know the first parameter in the generic argument is probably referring to the property interface which has all of my properties (this.props).
What does the second parameter of {} in the generic argument stand for? It looks like an object, but what does it do and what I can have in there? How can I even use it?
I've tried searching about this, but there aren't much info on React with Typescript.
It refers to the state of the React Component.
e.g.
export class Hello extends React.Component<HelloProps, {name: string}> {
render() {
return <h1>Hello {this.state.name}</h1>;
}
}