How To Add Statefull Component Without Constructor Class In ReactJS

In this article, we will learn how to add a Stateful component without constructor class in ReactJS.

First, we have to initialize the state outsize the constructor.

Similarly, the state can’t be initialized without a constructor class, when we initialize state outside constructor class again Bable read the syntax and understands there is a need to create constructor inside the class and do all the required hard works behind the scene.

state = {stateName1:stateValue1,
         ....... 
         stateNamek:stateValuek}

you can see how to use the statefull component without the constructor app.js file below.

import React, { Component } from 'react'

class App extends Component {

// constructor class
state = {msg : 'Hi, There!'}

handleClick(){
  this.setState({msg : 'Welcome to the React!'})
}

render(){
  return (
  <div>
    <h2>Message :</h2> 
        <p>{this.state.msg}</p>
    <button onClick={() => this.handleClick()}>
    Click here!
    </button>
  </div>
  )
}
}

export default App

you can see the output below.