×

Html & Html5

The World's best Software Development Study Portal

ReactJS CURD OPERATION

Reactjs Curd Operation stands for Create, Read, Update, and Delete. In ReactJS everything is aligned in a form of components and every component has its way and feature to do so.

App.js

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;

Create components

AddForm.js

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;

List.js

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;