CRUD.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", "Third Comment"],
        };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.DeleteComment = this.DeleteComment.bind(this);
      this.UpdateComment = this.UpdateComment.bind(this);
    }
  
    handleChange(event) {
      //console.log(this._inputElement.value);
    }
  
    handleSubmit(event) {
        if (this._inputElement.value !== "") {  
            let entered_value = this._inputElement.value
            let data = this.state.comment;
            this.setState({
                comment : data.concat(entered_value)
            });
            this._inputElement.value = "";
        }
        
        event.preventDefault();
    }

    DeleteComment(e){
        var array = this.state.comment;
        var index = array.indexOf(e); // Let's say it's Bob.
        delete array[index];
        this.setState({comment: array});
    }

    UpdateComment(e){
        this._inputElement.value = e;
        this.DeleteComment(e);
    }

    render() {
      return (
        <div className="container">
            <h1>Your Valuable Comments</h1>
            <table className="table table-bordered">
            <thead className="thead-dark">
                <tr>
                    <th scope="col">Comment</th>
                    <th scope="col">Edit</th>
                    <th scope="col">Delete</th>
                </tr>
            </thead>
            <tbody>
                {
                    this.state.comment.map((item,index) => {
                        return(
                            <tr key={index}>
                                <td>{item}</td>
                                <td><button className="btn btn-primary btn-sm" onClick={() => {this.UpdateComment(item);}}>Edit</button></td>
                                <td><button className="btn btn-danger btn-sm" onClick={() => {this.DeleteComment(item);}}>Delete</button></td>
                            </tr>
                        ) 
                    })
                }
              </tbody>
            </table>
            <hr/>
            <div>
                <h1>Provide Your Comments:</h1>
                <form onSubmit={this.handleSubmit} >
                    <label >Comment:</label>
                    <textarea className="form-control" ref={(a) => this._inputElement = a}  onChange={this.handleChange} /><br/>
                    <input className="btn btn-primary" type="submit" value="Submit You Comment" />
                </form>
            </div>
       </div>  
        
      );
    }
}

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