score:0
export function sendspeechtoserver(query){
let test = new messagedisplay();
test.sendmessagetoserver(query);
}
it is bad, because you should not, create new react.component instance with new keyword, better use static function like this
static sendmessagetoserver(searchquery) {
...code
}
and then
export function sendspeechtoserver(query){
messagedisplay.sendmessagetoserver(query);
}
score:1
better way to separate component(messagedisplay) and sendmessagetoserver.
then you can import sendmessagetoserver awry where. you can inject sendmessagetoserver
like a props:
// main.js
import { sendmessagetoserver } from './api';
<messagedisplay sendmessage={sendmessagetoserver} />
// messagedisplay.js
import react, { component } from 'react';
import proptypes from 'prop-types';
class messagedisplay extends component {
static proptypes = {
sendmessage: proptypes.func.isrequired,
}
handleclick = (e) => {
e.preventdefault();
this.props.sendmessage();
};
render() {
return (<button onclick={this.handleclick}>send to</button>)
}
}
export default messagedisplay;
it useful for testing.
score:1
instantiating a component manually for general purposes like let test = new messagedisplay()
is an antipattern, this indicates that a class is misused.
react component classes are primarily intended to make lifecycle hooks available and maintain state
. they can sparsely benefit from inheritance (besides the relationship with react.component
) and other oop traits.
the fact that it's possible to use component method as new messagedisplay().sendmessagetoserver(query)
means that it was a mistake to make it component method in the first place. classes aren't supposed to be glorified namespaces; es modules play the role of namespaces in modern javascript.
a proper way is to extract the method and use it in both places as regular helper function. functional approach is considered idiomatic in react.
Source: stackoverflow.com
Related Query
- Reactjs ES6 Access function outside of class
- How to add a onclick event in ag-grid cell renderer reactjs and access the class function
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- ReactJS - Call function from outside of class
- Altering the state of a ReactJS class after render from an outside function
- Reactjs Access class method outside the class but in same file
- ReactJS need to call function from outside class component
- Access React Context outside of render function
- What will happen if I use setState() function in constructor of a Class in ReactJS or React Native?
- Call a static function into the class React ES6
- setTimeout ReactJS with arrow function es6
- Function inside render and class in reactjs
- how to access vairables outside of map function in js and jsx in a React component
- function or variable outside of a class in react
- Refactor a React component from function to ES6 class
- Access prop outside of class in React when calling Higher Order Component
- How to test arrow function in React ES6 class
- why I can not use function keyword to define a function inside a reactjs class
- writing function outside of a class in react component
- es6 function declaration in React class
- How to access props outside of a class component React
- export function inside react component or access state in same file outside of component
- React component function returning JSX causes error when used in render method of ES6 class React component
- Access props outside class
- ReactJS ES6 function binding - Uncaught TypeError: Cannot read property 'update' of undefined
- es6 arrow function in class property
- How do I access a class variable of a mixin in a reactjs class?
- How to access reactjs component state in jquery callback function
- How can I access a class component method in a function component?
- reactjs 'this' context in a es6 class
More Query from same tag
- Unable to increment or decrement my quantity value React JS
- how to add array to an object as property?, like object of more than 1 property and one of the property is array
- Issue rendering list in React Component using API
- React Hook Toggle class on window resize
- How to format a moment date and compare with another moment date
- Invariant violation: The title prop of a button must be a string
- Datalabels is getting hidden outside the svg container in Sunburst Highchart
- Link react-hook-form Controller to a state value
- Cant type in material ui Textfield (react)
- React Redux get data from dynamic selector
- Pass argument to react method correctly
- Counters for each item in React.js
- web.config rewrite rule not working in Azure static website in blob storage
- How to change the color of radio button with font awesome icon in react, styled components
- Disallowing concurrent logins for same user at once
- How to do Dynamic images in ReactJS?
- How do you create multiple forms on the same page with redux-forms v6?
- Props.email value not printed on screen in react.js
- Given an array of json objects, how do I convert values in each object to an int or float?
- How can i return a JSON object and a zipped folder simultaneously from on end point in spring boot
- How to list a property of firebase object as an array?
- how to configure styled jsx in Eslint
- In Rails how do I access a server-side rendered React component as HTML
- React JS .map returns all data the same times as objects in JSON
- Ticking seconds with custom setInterval hook
- How can I store/setStates of several inputs from a mapped array
- Fetch for refresh token not working (React.js)
- Convert String type to slug type for sanity io
- Add & Remove class on button in React
- react-router createElement and render fail