PUT 404 (Not Found)

Viewed 206

I am trying editing the content of my database (which is stored on a json-server on my localhost) from a form. I am very new to React and Axios, so you can feel free to insult me if I am making a big shit here, but still, I hope you can help me to get me out from the error I am getting.

The code look like this:

Form:

                <Form onSubmit={submitPresentationEdit} id="presentationEditFormId">
                    <Form.Row>
                        <Form.Group>
                            <Form.Label>Title</Form.Label>
                            <Form.Control
                                name="title"
                                autoComplete="off"
                                as="textarea"
                                rows={1} />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Subtitle</Form.Label>
                            <Form.Control
                                name="subtitle"
                                autoComplete="off"
                                as="textarea"
                                rows={1} />
                        </Form.Group>
                    </Form.Row>
                    <Form.Group>
                        <Form.Label>Description</Form.Label>
                        <Form.Control
                            name="description"
                            autoComplete="off"
                            as="textarea"
                            rows={5} />
                    </Form.Group>
                    <Button
                        variant="success"
                        type="submit"
                        size="sm" >
                        Submit
                    </Button>
                </Form>

Submit function (submitPresentationEdit):

const submitPresentationEdit = (event) => {
        event.preventDefault();
        putPresentation(event.target.title.value, event.target.subtitle.value, event.target.description.value);
}

putPresentation function with axios:

    const putPresentation = async (tit, subtit, descr) => {
        const response = await axios
            .put('http://localhost:3005/presentation',
            {
                title: tit,
                subtitle: subtit,
                description: descr
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                  }
            })
            .then(response => {
                console.log(response.data);
            })
            .catch((err) => {
                console.log('Err', err);
            });
    }

And this is my json file:

[
  {
    "title": "PRESENTATION",
    "subtitle": "An Awesome Web delevoper on planet",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum.",
    "image": "../../public/assets/images/dp.jpg"
  }
]

The error I am getting on the console is the following:

PUT http://localhost:3005/presentation 404 (Not Found)
Err Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

Is there anyone that has idea of what could I do for get the result I need? Thank you in advance.

1 Answers

I have fixed the problem by simply adding an "id" field in my "presentation" section in my database, so now:

My json file looks like this:

[
  {
    "id": 0,
    "title": "PRESENTATION",
    "subtitle": "An Awesome Web delevoper on planet",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat enim arcu, eget tempor nibh congue a. Maecenas faucibus sagittis nibh, in bibendum ex. Donec eu ornare augue, nec cursus arcu. Vivamus accumsan mauris nec nulla bibendum, et eleifend nisl tristique. Pellentesque fringilla lorem id nibh auctor sagittis. Suspendisse non nisl at velit malesuada bibendum.",
    "image": "../../public/assets/images/dp.jpg"
  }
]
Related