I am a newbie to react I cannot understand why the function "renderCategoryDiv" needs to be static.
What am I not getting right?
If I remove static the code won't work
My tools : Visual Studio 2020 .net Core 3 API, NodeJs, and react
My code looks like this
import React, { Component } from 'react'; ...
export class Category extends Component {
static displayName = Category.name;
constructor(props) {
super(props);
this.state = { categories: [], ....
componentDidMount() {
this.populateCategoryData();
}
static renderProductDiv(categories) {
return (
<Row>
some code that works when the function is static
</Row >
);
}
Then I have a async fetch of data
Related
I have a question about ReactJS and components, specifically about how functions interact within the component system.
In this example:
// Index.js
import React from ‘/reactʼ;
import ReactDOM from ‘/react-domʼ;
import App from ‘./App.jsʼ;
ReactDOM.render(<App />, document.getElementById(‘rootʼ));
// App.js
import React from ‘/reactʼ;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ};
};
functionA = (e) => { console.log(e);
};
Render() {
return <div><ComponentA /></div>
};
};
export default App;
// ComponentA.js
import React from ‘/reactʼ;
import App from ‘./../App.jsʼ;
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ};
};
functionB = App.functionA
Render() {
return(
<div>
<input onSubmit={this.functionB} />
</div>
);
};
};
export default ComponentA;
ComponentA imports App.js and attempts to assign App.functionA to functionB and then call it in the JSX. This results in a failure basically saying that the function is not defined.
I know this is NOT the way to function share (I have learned about passing functions through props etc).
I simply just want to know WHY this does not work, to help me better understand the mechanics of React, and Javascript in general.
Thank you,
Curtis
To call a function from another React component, you can write static methods in ES6 notation. If you are using ES7, then you can also write static properties.
You can write statics inside ES6+ classes this way:
class Component extends React.Component {
static propTypes = {
...
}
static someMethod(){
}
}
Working Demo about static function
My noob brain finally figured it out lol... I think.
Basically because an instance of the class [the App component] was not initialized within the scope of ComponentA, the App function is not accessible.
This made it work (DISCLAIMER: I DO NOT PLAN ON DOING THIS, I KNOW ITS TERRIBLE CODE)
// ComponentA.js
import React from ‘/reactʼ;
import App from ‘./../App.jsʼ;
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ};
this.appInstance = new App();
}
functionB = (e) => {
this.appInstance.functionA(e);
}
Render() {
return(
<div>
<input onSubmit={this.functionB} />
</div>
);
}
};
export default ComponentA;
To start off, I have been working with React now for three months and the application I am building is testable, performant, etc... Nothing wrong. My experience pre-React is from the Angular world and what is considered a best practice there is not normally in react and vice-a-versa... I don't think what I am doing is wrong for the application I am building also don't want to miss anything big.
To make a long story short, inside of my App.tsx (using TypeScript) file I am creating a new instance of a singleton service and exporting it as a named export. For example, my app component looks something like:
import * as React from 'react'
... axios import here
import { HttpService } from './core/http.service';
import { Spinner } from './shared/spinner';
const axiosInstance = Axios.create({config here});
const httpService = new HttpService(axiosInstance);
class App extends React.Component {
props: any;
state: any;
constructor(props: any) {
super(props);
}
render() {
return(<App Root Component Here...>)
}
}
export { httpService };
export default App;
Imagine a component somewhere in the app that needs to use my singleton service. For the purposes of my question, I will call the component Home (home/Home.tsx).
import * as React from 'react'
import { httpService } from '../App';
class Home extends React.Component {
props: HomeProps;
state: HomeState;
constructor(props: HomeProps) {
super(props);
this.state = {
isLoading: false,
myData: []
}
this.loadData = this.loadData.bind(this);
}
componentDidMount() {
this.loadData();
}
// Using httpService here.
loadData() {
this.setState({isLoading: true});
httpService.get('/api/somedataurl').then((response) => {
const { data } = response;
this.setState({myData: data});
}).then(() => {
this.setState({isLoading: false});
});
}
myDataList() {
return (<ul>...{map of this.state.myData}</ul>)
}
render() {
return this.state.isLoading ? (<Spinner>) : this.myDataList();
}
}
export default Home;
I decided to use this implementation because I know that I can always rely on the App component to be available and there are no plans for server-side rendering.
As a simple solution, is there anything seriously flawed with providing my singleton service as a named export and importing into other components as needed?
I am learning how to develop applications using React as front-end and spring as back-end. While developing a sample application, I encountered an error as follows:
`(26,28): Property "value" does not exist on type 'Readonly<{}>`
This error is generated from my App.tsx file which contains the React Components definition in JSX.
The class component with the state "value" is defined as follows.
class App extends React.component{
constructor(props:any) {
super(props);
this.state = {
value:[],
isLoading:false
};
}
...
25 render(){
26 const value = this.state.value;
27 const isLoading = this.state.isLoading;
...
}
}//End of Class*
I am not understanding what's wrong. Can someone please help me look at it in a different perspective so that this problem can be approached in a different manner?
Did you declare an interface for your state?
Take a look at Hello React and TypeScript which shows an example of using interfaces with React Components.
I suspect you're missing something like this:
interface IMyComponentProps {
someDefaultValue: string
}
interface IMyComponentState {
someValue: string
}
class App extends React.Component<IMyComponentProps, IMyComponentState> {
// ...
}
could you please try this as follow.
class App extends React.component<{},any>{ //your code}
export default class ReactTodoWebpart extends React.Component<IReactTodoWebpartProps,any> {
/**
*
*/
constructor(props:IReactTodoWebpartProps) {
super(props);
this.state={
todoItems:[]
};
this.props.todoClient.getItems().then(resolvedItems=>{
this.setState({
todoItems: resolvedItems,
})
});
}
// I also face this issue and fixed it by using any in the second argument
I'm mostly just curious what the significance of this pattern is. In almost every example I've looked at for using the flux architecture the getAppState() function is defined right above the react class definition. Why? Why is it not a function of the component?
So why is this:
import React from 'react';
getAppState = () => {
return {
something: SomeStore.getState()
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = getAppState();
}
}
Better than this:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = this.getAppState();
}
getAppState() {
return {
something: SomeStore.getState()
}
}
}
And what if I'm wanting to pass arguments from this.props into the getAppState() function?
I am trying to learn Event in ReactJS.
I created 2 components
ChildComponent is
import React, { Component } from 'react';
// App component - represents the whole app
export default class ChildComponent extends Component {
render() {
return (
<button onClick={this.props.onBannerClick}>Click me!</button>
);
}
}
And ParentComponent is
import React, { Component } from 'react';
import ChildComponent from './ChildComponent.jsx'
// App component - represents the whole app
export default class ParentComponent extends Component {
performMagic: function() {
alert('TAADAH!');
},
render() {
return (
<BannerAd onBannerClick={this.performMagic} />
);
}
}
but I got the error
Errors prevented startup:
While building for web.browser:
imports/ui/ParentComponent.jsx:5:16: Unexpected token (5:16)
Your application has errors. Waiting for file change.
I think the error is from
performMagic: function() {
alert('TAADAH!');
},
But I do know what the error is.
By the way, can anybody recommends me good debug tools for ReactJS?
Because you're using the ES6 syntax you'll have to bind the function to the instance using the following approach.
constructor(props) {
super(props)
this.performMagic = this.performMagic.bind(this)
}
This will allow you to use the this keyword in the onClick call
import React, { Component } from 'react';
import ChildComponent from './ChildComponent.jsx'
// App component - represents the whole app
export default class ParentComponent extends Component {
constructor(props) {
super(props)
this.performMagic = this.performMagic.bind(this)
}
performMagic() {
alert('TAADAH!');
}
render() {
return (
<BannerAd onBannerClick={this.performMagic} />
);
}
}
Need to write:
performMagic () {
alert('TAADAH!');
},
You need to use new sintax for functions, when write class which is new sintax.
EDIT: You can use "React Developer Tools" chrome extension and gaearon "redux-devtools" for development.
You need to use the new ES6 syntax when making your React Component a class. Use
performMagic() {
alert('TAADAH!');
}
make sure you don't put a comma after the function