ReactJS CURD OPERATION

import React from 'react';
import './App.css';
import AddForm from "./components/AddForm";
import '../node_modules/bootstrap/dist/css/bootstrap.css';


function App() {
  return (
    <div className="row justify-content-center mt-3">
      <AddForm/>
    </div>
  );
}

export default App;

import {Component} from 'react';
import List from "./List";


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

        this.state = {
            dir:[],
            item:{
                name:"",
                tel:""
            },
            isEditing:false,
            temp_index:null
        }

        this.handleChange = this.handleChange.bind(this)
        this.add = this.add.bind(this)
        this.delete = this.delete.bind(this)
        this.edit = this.edit.bind(this)
        this.update = this.update.bind(this)
        this.view = this.view.bind(this)
    }

    view(item){
        alert(
            `
            Name = ${item.name}
            Tel = ${item.tel}
            `
        )
    }


    handleChange(event){
        const name = event.target.name;
        const value = event.target.value;
        let item = this.state.item;

        item[name] = value;

        this.setState({item:item})
    }


    add(e){
        e.preventDefault()
        let dir = this.state.dir;
        dir.push(this.state.item)
        this.setState({dir:dir, item:{name:"", tel:""}})
        console.log(this.state.dir)
    }

    edit(index){
        let item = this.state.dir[index]
        this.setState({item:item, isEditing:true, temp_index:index})
    }

    update(e){
        e.preventDefault()
        let dir = this.state.dir;
        dir[this.state.temp_index] = this.state.item

        this.setState({
            dir: dir,
            item:{
                name:"",
                tel:""
            },
            isEditing:false,
            temp_index:null
        })
    }


    delete(index){
        let dir = this.state.dir;
        dir.splice(index, 1)
        this.setState({dir:dir})
    }

    render(){
        return (

             <div className="col-md-6">

                 <form method="POST" onSubmit={this.state.isEditing ? this.update : this.add}>
                     <div className="mb-2">
                         <input
                            type="text"
                            name="name"
                            placeholder="Enter Name"
                            className="form-control"
                            value={this.state.item.name}
                            onChange={this.handleChange}
                        />
                     </div>
                     <div className="mb-2">
                         <input
                            type="text"
                            name="tel"
                            placeholder="Enter Phone"
                            className="form-control"
                            value={this.state.item.tel}
                            onChange={this.handleChange}
                        />
                     </div>
                     <div className="mb-2">
                        <button className="btn btn-success" type="submit">
                           {this.state.isEditing ? "Update" : "Save"}
                        </button>
                 </div>
                 </form>
                 <List
                    dir={this.state.dir}
                    delete={this.delete}
                    edit={this.edit}
                    view={this.view}
                />
           
             </div>
        )
    }
}

export default AddForm;

import { Component } from 'react';

class List extends Component {
    render() {
        return (
<div>

<ul className="list-group">

{
this.props.dir.map((item, index) => (
<li className="list-group-item" key={index}>
<table className='table table-bordered'>
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<thead>
<tr>
<th>{item.name}</th>
<th>{item.tel}</th>
<th>
<span className="float-right">

<button
className="btn btn-success btn-sm"
onClick={
(e) => this.props.view(item, e)
}
>View</button>
</span>
< /th>
< th>
< span className="float-right">
< button
className="btn btn-warning btn-sm"
onClick={(e) => this.props.edit(index, e)}
>Edit< /button>
< /span>
< /th>
< th>
< span className="float-right">

< button
className="btn btn-danger btn-sm"
onClick={
(e) => this.props.delete(index, e)
}
>Delete< /button>
< /span>
< /th>


< /tr>
< /thead>
< /table>
< /li>
))
}

< /ul>

< /div>
        )
    }
}

export default List;

Output:

Default Output

Data fillup Output

Data View Output

Data Edit Output

Data Delete Output