Estoy tratando de archivar un curso usando el siguiente código. Funciona, pero aparece el error "No detectado (en promesa) SyntaxError: token T inesperado en JSON en la posición 0" y tengo que actualizar la página para que se actualice el componente. Ahora sé que useState se puede usar aquí, pero no puedo hacer que funcione, así que lo eliminé antes de enviar esta pregunta.

Se agradece cualquier ayuda ya que soy un poco nuevo en todas estas cosas de reacción.

 import React, { } from 'react'; import { Button } from 'react-bootstrap'; import Swal from 'sweetalert2'; export default function ArchiveCourse({ course, isActive, fetchData }) { const archiveToggle = (courseId) => { fetch(`http://localhost:4000/courses/${courseId}/archive`, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('accessToken')}` } }) .then(res => res.json()) .then(data => { console.log(data) if (data === true) { Swal.fire({ title: 'Success', icon: 'success', text: 'Course successfully disabled' }) fetchData(); } else { Swal.fire({ title: 'Something Went Wrong', icon: 'Error', text: 'Please Try again' }) fetchData(); } }) } const unArchiveToggle = (courseId) => { fetch(`http://localhost:4000/courses/${courseId}/reactivate`, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('accessToken')}` } }) .then(res => res.json()) .then(data => { console.log(data) if (data === true) { Swal.fire({ title: 'Success', icon: 'success', text: 'Course successfully enabled' }) fetchData(); } else { Swal.fire({ title: 'Something Went Wrong', icon: 'Error', text: 'Please Try again' }) fetchData(); } }) } return ( <> {isActive ? <Button variant="danger" size="sm" onClick={() => archiveToggle(course)}>Archive</Button> : <Button variant="success" size="sm" onClick={() => unArchiveToggle(course)}>Unarchive</Button> } </> ) }