---
title: initialize state
---

// Component
import React, { Component } from 'react';



class TotalValue extends Component {
  constructor(props) {
    super(props);

    // dictionary(Other Language)/Object(JS) => pair/pairs of key and value => { key: value }
    // initialize state
    this.state = {
      // key   : value
      userInput: ""
    }

    // Step 3. bind this
    this.showSum = this.showSum.bind(this);
  }

  // Step 1. function define
  showSum(event) {
    // total number
    this.setState({
      userInput: event.target.value
    })
    //below given Will work only for the first time 
    this.state.userInput = event.target.value
  }

  render () {
    return (
      <div>
        {/* { Step 2. function Use } */}
        {this.showSum()}
        {/* bind */}
        <p>{this.state.userInput}</p>
        {/* bind
          value with state
          event with function
        */} 
        
        <input value={this.state.userInput} onChange={this.showSum} />
      </div>
    )
  }
}