How can I use useState here?

Question

I'm trying to archive a course using the code below. It works, but the error "Uncaught (in promise) SyntaxError: Unexpected token T in JSON at position 0" appears and I have to refresh the page for the component to update. Now I know useState can be used here but I can't get it to work so I removed it prior to sending this question.

Any help is appreciated as I'm kinda new to all these react stuff.

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>

            }
        </>

    )
}

Answer 1

You can do something like this:`

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

export default function ArchiveCourse({ course, isActive, fetchData }) {
    const [active, setActive] = useState(isActive);

    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'
                    })
                    setActive(false); //If you want to active status
                    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'
                    })
                    setActive(true); //If you want to active status
                    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>

            }
        </>

    )
}