correctit.js

import React from "react";
import { render } from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

/**
 * State 
 * -> Another way to represent data in react
 * -> It is ment for biz logic 
 * -> State is maintained, changed by a component itself
 * -> State is Changed by biz logic
 * -> Whenever teh state is changed, UI is repainted
 * 
 * Biz Logic 
 * -> It is function, Listener Function - Callback Function
 * -> It is Associated with "Event"
 * 
 * How to represent state data?
 * React Component has instance variable called "state"
 * 
 * Node: State Can be used only inside "Class" component only
 * Prop can be used inside class and also function  
 */

/* class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comment : ["First Comment", "Second Comment"],
            default : ""
        }
    
        this.handleChange = this.handleChange.bind(this);
        this.onComment = this.onComment.bind(this);
    }


    onComment = (event) =>{
        this.setState({
            comment : this.state.comment.push(this.state.default)
        })
        event.preventDefault();
    }

    handleChange(event) {
        this.setState({default: event.target.default});
    }

    render() {
        
        return (
            <div className="container">
                <h1>Your Valuable Comments</h1>
                <ul className="list-group">
                    {
                        this.state.comment.map((item,index) => {
                            return(
                            <li className="list-group-item" key={index}>{item}</li>  
                            ) 
                        })
                    }
                </ul>
                <hr/>
                <div>
                    <h1>Provide Your Comments:</h1>
                    <input type="text" className="form-control" placeholder="Give Your Comments" value={this.state.default} onChange={this.handleChange}/><br/>
                    <button className="btn btn-primary" type="button" onClick={this.onComment}>Submit You Comment</button>
                </div>
            </div>
        );
    }
} */

class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        comment : ["First Comment", "Second Comment"],
        value : ""
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
        this.setState({
            comment : this.state.comment.push(this.state.default)
        })
      event.preventDefault();
    }
  
    render() {
      return (
        <div className="container">
            <h1>Your Valuable Comments</h1>
            <ul className="list-group">
                {
                    this.state.comment.map((item,index) => {
                        return(
                        <li className="list-group-item" key={index}>{item}</li>  
                        ) 
                    })
                }
            </ul>
            <hr/>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        </div>
        
      );
    }
  }

render(<NameForm />, document.getElementById("root"));