Pass id parameter in fetch query (ReactJS)

Question

I am new in javscript development, and I have some trouble with passing id parameter in query URL. I am passing ID value in body now, which is not right, I guess in REST approach.

How can I pass Id: event.target.DepartmentId.value, into URL like https://localhost:5001/api/departments/{id} ?

handleSubmit(event){
    event.preventDefault();
    fetch("https://localhost:5001/api/departments/", {
        method: "PUT",
        headers:{
            "Accept":"application/json",
            "Content-Type":"application/json",
            "Origin": "*"
        },
        body: JSON.stringify({
            Id: event.target.DepartmentId.value,
            Name: event.target.DepartmentName.value
        })
    })
    .then(res=>res.json())
    .then((result)=>
    {
        this.setState({snackbaropen: true, snackbarmsg: "Edited successfully!"})
        
    },
    (error) =>{
        this.setState({snackbaropen: true, snackbarmsg: "failed"})
    }
    )
}

Thanks for any help!

You can build up your URI as you want. For example "localhost:5001/api/departments" + event.target.DepartmentId.value — Andrea Pollini
– Andrea Pollini, Commented May 31, 2020 at 13:14

elad BA · Accepted Answer · 2020-05-31 13:16:43Z

2

you should use params

and query params at the server side

   `https://localhost:5001/api/departments/?id=${id}`

answered May 31, 2020 at 13:16

elad BA

1,99814 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexey Rozhnev · Accepted Answer · 2020-05-31 13:16:12Z

you can use js template literal like this:

handleSubmit(event){
    event.preventDefault();
    fetch(`https://localhost:5001/api/departments/${event.target.DepartmentId.value}`, {
        method: "PUT",
        headers:{
            "Accept":"application/json",
            "Content-Type":"application/json",
            "Origin": "*"
        },
        body: JSON.stringify({
            Id: event.target.DepartmentId.value,
            Name: event.target.DepartmentName.value
        })
    })
    .then(res=>res.json())
    .then((result)=>
    {
        this.setState({snackbaropen: true, snackbarmsg: "Edited successfully!"})
        
    },
    (error) =>{
        this.setState({snackbaropen: true, snackbarmsg: "failed"})
    }
    )
}

hoozr · Accepted Answer · 2020-05-31 13:32:32Z

0

This worked. And the literals didn't.

  localhost:5001/api/departments" + event.target.DepartmentId.value

answered May 31, 2020 at 13:32

hoozr

5037 silver badges17 bronze badges

Collectives™ on Stack Overflow

Pass id parameter in fetch query (ReactJS)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related