Pop up Modal not updating-CodePudding

I am currently following a tutorial to edit my blog via a modal, however, whenever I press the edit button within the modal, I get the following error Failed to execute 'fetch' on 'Window': Invalid name in my console. Here is the following code where the error lies within:

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">&times;</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;

I believe the error is happening during the fetch call but my fetch call looks right with no mistakes, unless I am missing something:

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)
    }
  }

CodePudding user response：

I managed to replicate the error by typing this in the browser console

fetch('http://localhost:3000', {method: 'PUT', headers: {'Content Type': 'application/json'}, body: "{}"})

And the error was not shown when I type this:

fetch('http://localhost:3000', {method: 'PUT', headers: {'Content-Type': 'application/json'}, body: "{}"})

The problem is the name of the header. It should be Content-Type instead of Content Type.

CodePudding user response：

I switched to axios.put instead and it removed the error and my modal is now updating.