I have a React component
export default class Archive extends React.Component {
...
}
componentDidMount and onClick methods partially use the same code, except for slight change in parameters.
Is it possible to create a function inside the component class so it can be reused in the scope of the component?
You can create functions in react components. It is actually regular ES6 class which inherits from React.Component. Just be careful and bind it to the correct context in onClick event:
export default class Archive extends React.Component {
saySomething(something) {
console.log(something);
}
handleClick(e) {
this.saySomething("element clicked");
}
componentDidMount() {
this.saySomething("component did mount");
}
render() {
return <button onClick={this.handleClick.bind(this)} value="Click me" />;
}
}
this.myMethod()
this.handleClick works for me to invoke a custom function defined in my react component. What is this additional syntax .bind(this)? Why do we need it?this inside the method will not be what you would expect. See more about it here stackoverflow.com/questions/33973648/…Another way:
export default class Archive extends React.Component {
saySomething = (something) => {
console.log(something);
}
handleClick = (e) => {
this.saySomething("element clicked");
}
componentDidMount() {
this.saySomething("component did mount");
}
render() {
return <button onClick={this.handleClick} value="Click me" />;
}
}
In this format you don't need to use bind
saySomething.js and export saySomething there. Then in both of components you import saySomething and then call the function. The advantage of this approach is saySomething can be unit tested in separation and you have 2 independent components that just so happen using some same code instead of tangle them together
function() { ... } or declare the function in another file.You can try this.
// Author: Hannad Rehman Sat Jun 03 2017 12:59:09 GMT+0530 (India Standard Time)
import React from 'react';
import RippleButton from '../../Components/RippleButton/rippleButton.jsx';
class HtmlComponents extends React.Component {
constructor(props){
super(props);
this.rippleClickFunction=this.rippleClickFunction.bind(this);
}
rippleClickFunction(){
//do stuff.
// foo==bar
}
render() {
return (
<article>
<h1>React Components</h1>
<RippleButton onClick={this.rippleClickFunction}/>
</article>
);
}
}
export default HtmlComponents;
Yhe only concern is you have to bind the context to the function
With React Functional way
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
const App = () => {
const saySomething = (something) => {
console.log(something);
};
useEffect(() => {
saySomething("from useEffect");
});
const handleClick = (e) => {
saySomething("element clicked");
};
return (
<Button variant="contained" color="primary" onClick={handleClick}>
Hello World
</Button>
);
};
ReactDOM.render(<App />, document.querySelector("#app"));
