I have a React Component
export function sendAlert(msg) {
showAlert() //How to call in normal function a function from React.Component
}
export class Alert extends React.Component {
showAlert = () => {
alert("a")
};
render() {
return (
<div>
<h1>Component</h1>
</div>
)
}
}
Its possible to call function which call a function from React.Component
Technically, you can do it, but you should probably extract the common function and call it from both places.
You can do it by creating an instance of the component:
export function sendAlert(msg) {
const alert = new Alert();
alert.showAlert()
}
however, you should extract the code:
function commonShowAlert() {
alert("a");
}
export function sendAlert(msg) {
commonShowAlert();
}
export class Alert extends React.Component {
showAlert = () => {
commonShowAlert();
};
...
...
}
You can do that only if your method is a static one.
You declare your method inside the class as follows :
static showAlert() { alert("a"); }
and then you can access it outside as CLASSNAME.METHOD_NAME
for example : Alert.showAlert();
As @Davin said in his answer, you can declare it outside (that's also my suggestion, cleaner code), but if you have to declare it inside the class, you have the static option.
If your method will not using this, you can use static method
import Alert from '../somewhere';
export function sendAlert(msg) {
Alert.showAlert() // <<--- use Alert.method() to call a static method
}
-
export class Alert extends React.Component {
// Make the method to static
static showAlert = () => {
alert("a")
};
render() {
return (
<div>
<h1>Component</h1>
</div>
)
}
}
