Create stateful class component in react

The stateful class component can be define by defining the state in the constructor and bind with respective html element. The state is define in class component by using this keyword and access in html by using this keyword. The state is updated by using setState method.

Create stateful class component in react

1. Create class component2. Define state in component constructor3. Bind html element with state property4. Define handler method which update state5. Bind handler with html element change event

Create class component

 1 import React from 'react';
 2 import './style.css';
 3 
 4 class App extends React.Component {
 5 
 6   render() {
 7     return (
 8       <div>
 9         <div>
 10           <label htmlFor="username">Username</label>
 11           <input type="text" id="username" name="username"
 12             placeholder="Username"
 13           />
 14         </div>
 15       </div >
 16     );
 17   }
 18 }
 19 export default App;
 20

In the above example, a class component is created by extending a React.Component class with render() method. A render() method returns a single element or a wrapper element. An input element added with attributes.

Define state in component constructor

 1 // defining state and assign any valid object
 2 this.state({
 3   username: ''
 4 });

In the above example, a component state defines using state() method by passing a Json object and accessible using this keyword. A state property is accessible using state object and can be bind with html element input as shown below.

Bind html element with state property

 1 <div>
 2 	<label htmlFor="username">Username</label>
 3 	<input type="text" id="username" name="username"
 4 	  placeholder="Username" defaultValue={this.state.username}
 5 	/>
 6 </div>

In the above example, a state property is bind with input element attribute defaultValue. A component state is accessible in the template using this keyword and set property value as default value to the input element.

Define handler method which update state

 1 changeUsername(e) {
 2     this.setState({
 3       username: e.target.value
 4     });
 5 }

In the above example, a handler method changeUsername() is define that receives a event object that sets the state value using setState() method by passing an updated Json object. An input element value is accessed from event object target property.

Bind handler with html element change event

 1 <div>
 2   <label htmlFor="username">Username</label>
 3   <input type="text" id="username" name="username"
 4 	placeholder="Username" defaultValue={this.state.username}
 5 	onChange={this.changeUsername.bind(this)}
 6   />
 7 </div>

In the above example, a handler method is bind with input event onChange by specifying a handler method that bind to this object using Javascript bind() method by passing a reference of component (this). It will be called when the input element value changed.

⇢ bind() function in Javascript

Stateful component example

Stateful class example

 1 import React from 'react';
 2 import './style.css';
 3 
 4 class App extends React.Component {
 5   constructor(props) {
 6     super(props);
 7 
 8     // defining state and assign any valid object
 9     this.state = {
 10       username: '',
 11     };
 12   }
 13 
 14   changeUsername(e) {
 15     this.setState({
 16       username: e.target.value,
 17     });
 18   }
 19 
 20   render() {
 21     return (
 22       <div class="App">
 23         <div>
 24           <div>Entered value : {this.state.username}</div>
 25           <label htmlFor="username">Username</label>
 26           <input
 27             type="text"
 28             id="username"
 29             name="username"
 30             placeholder="Username"
 31             defaultValue={this.state.username}
 32             onChange={this.changeUsername.bind(this)}
 33           />
 34         </div>
 35       </div>
 36     );
 37   }
 38 }
 39 export default App;

In the above example, a class component is created by extending a React.Component. A constructor define a state object is created by assigning a Json object. A method handler changeUsername() handler is define that update state object using setState() method by passing an updated object. A render() method returns a single element that includes html input element that bind with state property and element onChange event with handler method using Javascript bind() method.

A handler method will be called when an input element value is changed by passing an input element event. A value of input element is retrieved using event target property.

style.css

 1 .App {
 2   margin: 10px;
 3   border: 1px solid blue;
 4   padding: 10px;
 5   border-radius: 5px;
 6 }
 7 
 8 label {
 9   display: inline-block;
 10   width: 80px;
 11   margin: 5px 0px;
 12 }