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

User · Answer

With React Functional way import React    useEffect   from  quot react quot   import ReactDOM from  quot react-dom quot   import Button from  quot  material-ui core Button quot    const App        gt      const saySomething    something    gt        console log something          useEffect      gt        saySomething  quot from useEffect quot            const handleClick    e    gt        saySomething  quot element clicked quot           return        lt Button variant  quot contained quot  color  quot primary quot  onClick  handleClick  gt        Hello World      lt  Button gt           ReactDOM render  lt App   gt   document querySelector  quot  app quot      https   codesandbox io s currying-meadow-gm9g0

User · Answer

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  lt button onClick  this handleClick bind this   value  Click me    gt

User · Answer

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             lt article gt                lt h1 gt React Components lt  h1 gt                lt RippleButton onClick  this rippleClickFunction   gt            lt  article gt                   export default HtmlComponents    Yhe only concern is you have to bind the context to the function

User · Answer

Another way   export default class Archive extends React Component       saySomething    something    gt        console log something          handleClick    e    gt        this saySomething  element clicked           componentDidMount         this saySomething  component did mount           render         return  lt button onClick  this handleClick  value  Click me    gt           In this format you don t need to use bind

[javascript] Creating custom function in React component

Examples related to javascript

Examples related to reactjs