Creating custom function in React component

Question

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?

Answer 1

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" />;     } } 

Answer 2

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