reactjs - react axios and react-hook form problem put in json

Question

I am a student who is practicing react js, for this I am developing a calendar in which you can put notes, as you will see there are some notes that I have put by hand. I have installed axios to work the json and the get of the data does it well, but when I try to set a new data it gives me this error.

the browser console shows me this error

PATCH http://localhost:5000/January/3/alarms/ 404 (Not Found) Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:62)

this is my JSOn

    {
  "January": [
    {
      "id": 1,
      "alarms": [
        {
          "name": "Medico",
          "initHour": "12:00",
          "endHour": "12:35"
        },
        {
          "name": "fisio",
          "initHour": "16:00",
          "endHour": "17:00"
        },
        {
          "name": "desayuno con Rick",
          "initHour": "8:00",
          "endHour": "9:00"
        }
      ]
    },
    {
      "id": 2,
      "alarms": [
        {
          "name": "Desayuno",
          "initHour": "9:00",
          "endHour": "9:35"
        },
        {
          "name": "banco",
          "initHour": "11:00",
          "endHour": "12:00"
        }
      ]
    },
    {
      "id": 3,
      "alarms": []
    },{
      "id": 4,
      "alarms": []
    },
    {
      "id": 5,
      "alarms": []
    },
    {
      "id": 6,
      "alarms": []
    },
    {
      "id": 7,
      "alarms": []
    },
    {
      "id": 8,
      "alarms": []
    },
    {
      "id": 9,
      "alarms": [
        {
          "name": "fisio",
          "initHour": "16:00",
          "endHour": "17:00"
        }
      ]
    },
    {
      "id": 10,
      "alarms": []
    },
    {
      "id": 11,
      "alarms": []
    },
    {
      "id": 12,
      "alarms": []
    },
    {
      "id": 13,
      "alarms": []
    },
    {
      "id": 14,
      "alarms": []
    },
    {
      "id": 15,
      "alarms": []
    },
    {
      "id": 16,
      "alarms": [
        {
          "name": "fisio",
          "initHour": "16:00",
          "endHour": "17:00"
        }
      ]
    },
    {
      "id": 17,
      "alarms": []
    },
    {
      "id": 18,
      "alarms": []
    },
    {
      "id": 19,
      "alarms": []
    },
    {
      "id": 20,
      "alarms": []
    },
    {
      "id": 21,
      "alarms": []
    },
    {
      "id": 22,
      "alarms": []
    },
    {
      "id": 23,
      "alarms": [
        {
          "name": "fisio",
          "initHour": "16:00",
          "endHour": "17:00"
        }
      ]
    },
    {
      "id": 24,
      "alarms": []
    },
    {
      "id": 25,
      "alarms": []
    },
    {
      "id": 26,
      "alarms": []
    },
    {
      "id": 27,
      "alarms": []
    },
    {
      "id": 28,
      "alarms": []
    },
    {
      "id": 29,
      "alarms": []
    },
    {
      "id": 30,
      "alarms": [
        {
          "name": "fisio",
          "initHour": "16:00",
          "endHour": "17:00"
        }
      ]
    },
    {
      "id": 31,
      "alarms": []
    }
  ]
}

and this is my code

import React, {useEffect, useState} from "react";
import './Calendar.scss';
import axios from "axios";
import Day from "./Day/Day";
import Modal from 'react-modal';
import { useForm } from 'react-hook-form';

const customStyles = {
    content : {
        top                   : '50%',
        left                  : '50%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%',
        transform             : 'translate(-50%, -50%)'
    }
};

export default function Calendar() {
    let subtitle;
    const { register, handleSubmit} = useForm();
    const [days, setDays] = useState([]);
    const [modalIsOpen,setIsOpen] = useState(false);
    const [id, setId] = useState([]);

    Modal.setAppElement('#root')

    useEffect(() => {
        axios.get('http://localhost:5000/January').then(res => {
            setDays(res.data);
        });
    }, [])


    const onSubmit = form => {
        console.log('http://localhost:5000/January/' + id + '/alarms', form);
        axios.patch('http://localhost:5000/January/' + id + '/alarms/', form).then(res => {
            console.log(res);
        });
    }

    function openModal(id) {
        setIsOpen(true);
        setId(id);
    }

    function afterOpenModal() {
        // references are now sync'd and can be accessed.
        subtitle.style.color = 'rgb(72, 181, 163)';
    }

    function closeModal(){
        setIsOpen(false);
    }

    return (
        <div className="b-calendar">
            <h3 className="b-calendar__title">January</h3>
            <div className="b-calendar__headers">
                <div>Monday</div>
                <div>Tuesday</div>
                <div>Wednesday</div>
                <div>Thursday</div>
                <div>Friday</div>
                <div>Saturday</div>
                <div>Sunday</div>
            </div>
            <div className="b-calendar__content">
                <div className="b-december"><h1>28</h1></div>
                <div className="b-december"><h1>29</h1></div>
                <div className="b-december"><h1>30</h1></div>
                <div className="b-december"><h1>31</h1></div>
                {days.map((item, index) =>
                        <div key={index+1} id={index+1} onClick={() => openModal(item.id)}>
                            <Day items={item}/>
                        </div>
                )}
            </div>
            <Modal
                isOpen={modalIsOpen}
                onAfterOpen={afterOpenModal}
                onRequestClose={closeModal}
                style={customStyles}
                contentLabel="Example Modal"
            >
                <h2 ref={_subtitle => (subtitle = _subtitle)}>A?adir Cita</h2>

                <form className="b-loginForm" onSubmit={handleSubmit(onSubmit)}>

                    <label htmlFor="initHour">
                        <span className="b-text-label">Init hour</span>
                        <input id="initHour" className="b-input" type="time" name="initHour" ref={register({ required: true})} />
                    </label>

                    <label htmlFor="endHour">
                        <span className="b-text-label">End hour</span>
                        <input id="endHour" className="b-input" type="time" name="endHour" ref={register()} />
                    </label>

                    <label htmlFor="name">
                        <span className="b-text-label">Alarms name</span>
                        <input id="name" className="b-input" type="text" name="name" ref={register({ required: true})} />
                    </label>

                    <input className="b-btn" type="submit" value="Guardar" />
                    <button onClick={closeModal}>Salir</button>
                </form>
            </Modal>

        </div>

    )
}```


  [1]: https://i.stack.imgur.com/PDVPD.png

question from:https://stackoverflow.com/questions/65865267/react-axios-and-react-hook-form-problem-put-in-json

Answer 1

Waitting for answers