I’m performing a CRUD operation by adding data in db.json server file.
My edit request is not working like I’m using a Class component and having Error ::
App.js
import React, { useState, useEffect } from 'react';
import {BrowserRouter as Router, Switch,Route} from 'react-router-dom'
import axios from 'axios';
import Header from './components/header';
import DisplayList from './components/displayList';
import InputForm from './components/InputForm';
import EditContacts from './components/editContacts';
import './App.css';
function App() {
const [contacts,setContacts] = useState([]);
const getContacts = async ()=>{
try{
const res = await axios.get("http://localhost:4000/contacts");
setContacts(res.data)
}
catch(err){
console.log(err);
}
}
const addingContacts = async (contact)=>{
const request = {...contact}
const response = await axios.post("http://localhost:4000/contacts",request)
setContacts([...contacts,response.data]);
}
const removeContacts = async(id) =>{
await axios.delete(`http://localhost:4000/contacts/${id}`);
const newContacts = contacts.filter(contact=> contact.id !== id);
setContacts(newContacts);
}
//Edit and Update function:
const updatingContacts = async(contact)=>{
const response = await
axios.put(`http://localhost:4000/contacts/${contact.id}`,contact);
const {id,Username,Email} = response.data;
console.log(response.data);
setContacts(contacts.map(contact=>{
return contact.id !== id ? {...response.data} :contact
}))
}
useEffect(()=>{
getContacts();
},[])
return (
<Router>
<Switch>
<div className="App">
<Route path="/" exact>
<Header/>
</Route>
<Route path="/add">
<InputForm addingContacts={addingContacts}/>
</Route>
<Route path="/diplay">
<DisplayList contacts={contacts} removeContacts={removeContacts}/>
</Route>
<Route path="/edit">
<EditContacts updatingContacts={updatingContacts}/>
</Route>
</div>
</Switch>
</Router>
);
}
export default App;
(editContact.js)Edit Component:
import React, { Component } from 'react';
import{Link} from 'react-router-dom';
import { Form, Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
class editContacts extends Component {
constructor(props) {
super(props)
const {id,Username,Email} = props.location.state.contact
this.state = {
id,
Username,
Email
}
}
handleUpdate=(e)=>{
e.preventDefault();
if(!this.state.Username && !this.state.Email){
return alert("Input Fields are Empty");
}
else{
alert(`My name is: ${this.state.Username} and my Email address is: ${this.state.Email}`);
}
this.props.updatingContacts(this.state);
this.setState({Username:"",Email:""})
}
render() {
return (
<div>
<div className="card" >
<div className="card-header text-center">
<h2>Add Contacts</h2>
</div>
</div>
<Form onSubmit={this.handleUpdate}>
<Form.Group className="mb-3" controlId="formBasicName">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Name" name="Username"value ={this.props.state.Username} onChange={(e)=>{this.setState({Username:e.target.value})}}/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" name="Email" value ={this.props.state.Email} onChange={(e)=>{this.setState({Email:e.target.value})}}/>
</Form.Group>
<Button variant="btn btn-outline-success" type="submit" style={{marginBottom:"20px", marginRight:"8px"}}>
Update
</Button>
<Link to="/">
<Button variant="btn btn-outline-secondary" type="button" style={{marginBottom:"20px"}}>
Main Page
</Button>
</Link>
</Form>
</div>
)
}
}
export default editContacts
“Error is occuring in Edit component” Please lemme know if anyone understand this error.
… so I try this in every component where I pass the props from parent component …