ReactJS lifecycle method inside a function Component

Question

Instead of writing my components inside a class, I\'d like to use the function syntax instead.

How do I override componentDidMount, componentWillM

Answer 1

You can make use of create-react-class module. Official documentation

Of course you must first install it

npm install create-react-class

Here is a working example

import React from "react";
import ReactDOM from "react-dom"
let createReactClass = require('create-react-class')


let Clock = createReactClass({
    getInitialState:function(){
        return {date:new Date()}
    },

    render:function(){
        return (
            
{this.state.date.toLocaleTimeString()}
        )
    },

    componentDidMount:function(){
        this.timerId = setInterval(()=>this.setState({date:new Date()}),1000)
    },

    componentWillUnmount:function(){
        clearInterval(this.timerId)
    }

})

ReactDOM.render(
    ,
    document.getElementById('root')
)