I am working on a fairly simple todo app. But not without problems.

I am trying to make a PUT request to an Google Firebase realtime database.

In my create request I create an autogenerated ID that I am using for the PUT reguest also.

However, when I try to execute the function it returns 400-Bad reguest.

Something like this previously happend before with my Delete function. I could not use the Id, but when deleting everything (same function but without the Id in the url) it works just fine.

Here is some code

 export const MarkAsDone = async (id: number) => {
  // const {id}: any = useParams();
  try {
    await axios.put(`${UrlTodo}/${id}.json`);
    window.location.reload();
} catch (error) {
    console.error(error)
}};

export const DeleteAll = async () => {
    try {
        await axios.delete(`${UrlTodo}.json`);
        window.location.reload();
    } catch (error) {
        console.error(error)
    }
};

And here is some code from the view side

    <td>
       <Button onClick={() => MarkAsDone(todo.id)} className={todo.isComplete ? "d-none" : "btn btn-outline-primary"}>Mark as done</Button>
   </td>
    
    <Button onClick={() => DeleteAll()} className="btn btn-outline-danger">Remove All</Button>

The DeleteAll() function works. But when trying to delete 1 single object it does not work and it would return a 400, so I guess there might be something weird when trying to access a specific object by ID.

The MarkAsDone() does not work and returns a 400.

Also, when using Firebase realtime database, you need to add .json at the end of every URL. Just to make things clear about that :)

If anyone has any idea, please let me know!

Thanks!

Edit: I tried passing in data with a model into the PUT-request I added this

 export interface updateTodoModel {
    id: number;
    name: string;
    isComplete: boolean = true;
}

it is the same data that I am working with, but the only update I want is to make the isComplete true with a press of a button.

I updated the MarkAsDone() function like this

export const MarkAsDone = async (id: number, todo: updateTodoModel) => {
  // const {id}: any = useParams();
  try {
    await axios.put(`${UrlTodo}/${id}.json`, todo);
    window.location.reload();
} catch (error) {
    console.error(error)
}};

Still the same problem though. How could this be done?