Currently, I am in the process of learning how to modify my blog using a modal window. However, when I click on the edit button within the modal, an error message
'Failed to execute 'fetch' on 'Window': Invalid name'import React, { Fragment, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const EditTodo = ( { blog }) => {
const [title, setTitle] = useState(blog.title)
const [content, setContent] = useState(blog.content)
const editText = async (id) => {
const body = {title, content}
console.log(JSON.stringify(body))
try {
const res = await fetch(`http://localhost:5000/blog/${id}`, {
method: "PUT",
headers: {'Content Type': 'application/json'},
body: JSON.stringify(body)
})
console.log(res)
} catch (err) {
console.error(err.message)
}
}
return (
<Fragment>
<button type="button" className="btn btn-warning" data-toggle="modal" data-target={`#id${blog.post_id}`}>
Edit
</button>
<div className="modal" id={`id${blog.post_id}`}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Edit Blog</h4>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div className="modal-body">
<input type='text' className='form-control' value={title} onChange={e => setTitle(e.target.value)}/>
<input type='text' className='form-control' value={content} onChange={e => setContent(e.target.value)}/>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-warning" data-dismiss="modal" onClick={() => editText(blog.post_id)}>Edit</button>
<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default EditTodo;
Though I have reviewed my fetch call and can't seem to find any mistakes, it appears that the error is occurring during this function:
const editText = async (id) => {
const body = {title, content}
console.log(JSON.stringify(body))
try {
const res = await fetch(`http://localhost:5000/blog/${id}`, {
method: "PUT",
headers: {'Content Type': 'application/json'},
body: JSON.stringify(body)
})
console.log(res)
} catch (err) {
console.error(err.message)
}
}