Hi All, I am having a difficult time with my react app updating items in the backend of my express API i made. Its an array of items on a json file and fetch them using axios, however, when I want to update an item I seem to be failing to get it to update.
import React, { Component } from 'react';
import axios from 'axios';
import { Input, FormGroup, Label, Modal, ModalHeader, ModalBody, ModalFooter, Table, Button } from 'reactstrap';
class Apps extends Component {
state = {
items: [],
newItemModal: {
title: '',
description: '',
url: ''
},
editItemData: {
title: '',
description: '',
url: ''
},
newItemModal: false,
editItemModal: false
}
componentWillMount() {
this._refreshItems();
}
toggleNewItemModal() {
this.setState({
newItemModal: ! this.state.newItemModal
});
}
toggleEditItemModal() {
this.setState({
editItemModal: ! this.state.editItemModal
});
}
addItem() {
axios.post("/api/add", this.state.newItemData).then((response) => {
let { items } = this.state;
items.push(response.data);
this.setState({ items, newItemModal: false, newItemModal: {
title: '',
description: '',
url: ''
}});
});
}
updateItem() {
let { title, description, url } = this.state.editItemData;
axios.put('/api/' + this.state.editItemData.id, {
title, description, url
}).then((_response) => {
this._refreshItems();
this.setState({
editItemModal: false, editItemData: { title: '', url: '' }
})
});
}
editItem(title, description, url) {
this.setState({
editItemData: { title, description, url }, editItemModal: ! this.state.editItemModal
});
}
deleteItem(id) {
axios.delete("/api/:id").then((response) => {
this._refreshItems();
});
}
_refreshItems() {
console.log("Mounted")
axios.get("/api").then(data => this.setState(data.data));
}
render() {
let items = this.state.items.length && this.state.items.map((item) => {
return (
<tr key={item.id}>
<td>{item.title}</td>
<td>{item.description}</td>
<td>{item.url}</td>
<td>
<Button color="success" size="sm" className="mr-2" onClick={this.editItem.bind(this, item.title, item.url)}>Edit</Button>
<Button color="danger" size="sm" onClick={this.deleteItem.bind(this, item.id)}>Delete</Button>
</td>
</tr>
)
});
return (
<div className="App container">
<h1>Project Items App</h1>
<Button className="my-3" color="primary" onClick={this.toggleNewItemModal.bind(this)}>Add Item</Button>
<Modal isOpen={this.state.newItemModal} toggle={this.toggleNewItemModal.bind(this)}>
<ModalHeader toggle={this.toggleNewItemModal.bind(this)}>Add a new Item</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="title">Title</Label>
<Input id="title" value={this.state.newItemModal.title} onChange={(e) => {
let { newItemModal } = this.state;
newItemModal.title = e.target.value;
this.setState({ newItemModal });
}} />
</FormGroup>
<FormGroup>
<Label for="description">description</Label>
<Input id="description" value={this.state.newItemModal.description} onChange={(e) => {
let { newItemModal } = e.target.value;
newItemModal.description = e.target.value;
this.setState({ newItemModal });
}} />
</FormGroup>
<FormGroup>
<Label for="url">url</Label>
<Input id="url" value={this.state.newItemModal.url} onChange={(e) => {
let { newItemModal } = this.state;
newItemModal.url = e.target.value;
this.setState({ newItemModal });
}} />
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.addItem.bind(this)}>Add Item</Button>{' '}
<Button color="secondary" onClick={this.toggleNewItemModal.bind(this)}>Cancel</Button>
</ModalFooter>
</Modal>
<Modal isOpen={this.state.editItemModal} toggle={this.toggleEditItemModal.bind(this)}>
<ModalHeader toggle={this.toggleEditItemModal.bind(this)}>Edit a new Item</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="title">Title</Label>
<Input id="title" value={this.state.editItemData.title} onChange={(e) => {
let { editItemData } = this.state;
editItemData.title = e.target.value;
this.setState({ editItemData });
}} />
</FormGroup>
<FormGroup>
<Label for="description">description</Label>
<Input id="description" value={this.state.editItemModal.description} onChange={(e) => {
let { editItemModal } = this.state;
editItemModal.description = e.target.value;
this.setState({ editItemModal });
}} />
</FormGroup>
<FormGroup>
<Label for="url">url</Label>
<Input id="url" value={this.state.editItemData.url} onChange={(e) => {
let { editItemData } = this.state;
editItemData.url = e.target.value;
this.setState({ editItemData });
}} />
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.updateItem.bind(this)}>Update Item</Button>{' '}
<Button color="secondary" onClick={this.toggleEditItemModal.bind(this)}>Cancel</Button>
</ModalFooter>
</Modal>
<Table>
<thead>
<tr>
<th>Title</th>
<th>description</th>
<th>URL</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{items}
</tbody>
</Table>
</div>
);
}
}
Here is my code to update, when I click on the Add Item modal, it opens up but when typing info into it I get an error: TypeError: Cannot create property ‘title’ on boolean ‘true’, so how or where did I miss something?
I need to figure out how to add that. In the back-end yes?