I am working with this CRUD table but the issue is when I use CreateForm onSubmit ,it works but the UpdateForm OnSubmit button is not working, why?
import React, { Component } from "react";
import ReactDOM from "react-dom";
import CRUDTable, {
Fields,
Field,
CreateForm,
UpdateForm,
DeleteForm
} from "react-crud-table";
import axios from 'axios'
import { useState, useEffect } from "react";
// Component's Base CSS
import "./index.css";
import { render } from "@testing-library/react";
let styles = {
container: { margin: "auto", width: "fit-content" }
};
var tasks = [
{
id: 1,
title: "Create an example",
description: "Create an example of how to use the component"
},
{
id: 2,
title: "Improve",
description: "Improve the component!"
}
];
let count = tasks.length;
const service = {
create: task => {
const headers = {
'Content-Type': 'application/json',
}
axios.post('http://127.0.0.1:8000', {
"name": task.name,
"roll_no": task.roll_no,
"email": task.email,
"phone":task.phone,
"address": task.address
}, {
headers: headers
})
.then((response) => {
alert(response.data);
}, (error) => {
alert(error);
});
return Promise.resolve(task);
},
update: task => {
alert("update")
var id=this.state.students.find(t => t.id === task.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
//const url='http://127.0.0.1:8000/'+String(task.roll_no)+'/';
/axios.put(url, {
"name": task.name,
"roll_no": task.roll_no,
"email": task.email,
"phone":task.phone,
"address": task.address
}, {
headers: headers
})
.then((response) => {
alert(response.data);
}, (error) => {
alert(error);
});/
return Promise.resolve(task);
},
delete: data => {
const task = tasks.find(t => t.id === data.id);
tasks = tasks.filter(t => t.id !== task.id);
return Promise.resolve(task);
}
};
const SORTERS = {
NUMBER_ASCENDING: mapper => (a, b) => mapper(a) - mapper(b),
NUMBER_DESCENDING: mapper => (a, b) => mapper(b) - mapper(a),
STRING_ASCENDING: mapper => (a, b) => mapper(a).localeCompare(mapper(b)),
STRING_DESCENDING: mapper => (a, b) => mapper(b).localeCompare(mapper(a))
};
const getSorter = data => {
const mapper = x => x[data.field];
let sorter = SORTERS.STRING_ASCENDING(mapper);
if (data.field === "id") {
sorter =
data.direction === "ascending"
? SORTERS.NUMBER_ASCENDING(mapper)
: SORTERS.NUMBER_DESCENDING(mapper);
} else {
sorter =
data.direction === "ascending"
? SORTERS.STRING_ASCENDING(mapper)
: SORTERS.STRING_DESCENDING(mapper);
}
return sorter;
};
class Example extends React.Component{
constructor(props) {
super(props);
this.state = {
students:[]
};
}
componentDidMount(){
axios.get('http://127.0.0.1:8000/').then((response) => {
console.log(response.data);
var studs=[]
var studs2=[]
studs.push(response.data.students)
console.log(studs[0]['0'])
for (var i=0;i<studs[0].length;i++){
studs2.push(studs[0][String(i)])
}
this.setState({
students:studs2
})
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
}
fetchItems=(payload) => {
let result = Array.from(this.state.students);
result = result.sort(getSorter(payload.sort));
return Promise.resolve(result);
}
update= (data) => {
alert("update")
var id=this.state.students.find(t => t.id === data.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
}
please(data) {
alert("update")
var id=this.state.students.find(t => t.id === data.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
}
render() {
const DescriptionRenderer = ({ field }) => <textarea {...field} />
return (
<CRUDTable
caption="Students"
fetchItems={payload => this.fetchItems(payload)}
>
<Field
name="roll_no"
label="Roll_no"
/>
<Field
name="email"
label="Email"
type="email"
/>
<Field
name="phone"
label="Phone"
/>
<Field
name="address"
label="Address"
render={DescriptionRenderer}
/>
</Fields>
<CreateForm
title="Student"
message="Add new Student!"
trigger="Add Student"
onSubmit={task => service.create(task)}
submitText="Add"
validate={values => {
const errors = {};
if (!values.name || !values.phone) {
errors.name = "Provide all details";
}
return errors;
}}
/>
<UpdateForm
title="Task Update Process"
message="Update task"
trigger="Update"
onSubmit={task => service.update(task)}
submitText="Update"
validate={values => {
const errors = {};
if (!values.id) {
errors.id = "Please, provide id";
}
if (!values.title) {
errors.title = "Please, provide task's title";
}
if (!values.description) {
errors.description = "Please, provide task's description";
}
return errors;
}}
/>
<DeleteForm
title="Task Delete Process"
message="Are you sure you want to delete the task?"
trigger="Delete"
onSubmit={task => service.delete(task)}
submitText="Delete"
validate={values => {
const errors = {};
if (!values.id) {
errors.id = "Please, provide id";
}
return errors;
}}
/>
</CRUDTable>
);
}
}
export default Example;