1

I have uploaded two pictures. In the first picture, the Object that is passing doesn't have Object written on top. Can anyone figure out what is the problem. because in second picture, there is object is written on top when passed to put method.

import { useState } from "react";
import AdminService from "../../Services/AdminService";

export default function PriceChartHtml(props){

    const [id, setId] = useState(props.price.id)
    const [room, setRoom] = useState(props.price.room);
    const [price, setPrice] = useState(props.price.price);

    const handlechange = (e) => {
        let value = e.target.value
        if(e.target.name === "roomprice"){
            setPrice(value)
        }
    }

    const handleUpdate = () => {
        const formvalue = {id,room,price}

        console.log(formvalue)

        AdminService.updateroomprice(formvalue).then((response) => {    
            if(response.data == 1){
            console.log("after update product :" + response)
            alert("Price updated successfully")
            }
        }).catch((err) => {
            console.log(err)
            alert("Something went wrong")
        })
    }

    return(
        <tr>
            <td>{id}</td>
            <td >{room}</td>
                <td>
                <input className="form-control"
                type = "number"
                name = "roomprice" 
                defaultValue={price}
                onChange ={handlechange}
                />
                </td> 
            <td>
                <button className="btn btn-success" onClick={handleUpdate}>Update price</button>
            </td>                      
        </tr>
                      
    );
}

Object passed is it is not showing object on the top like in another picture enter image description here

this error is showing

Access to XMLHttpRequest at 'http://localhost:8080/admin/updateroomprice' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
PriceCharthtml.js:28 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
xhr.js:220          
PUT http://localhost:8080/admin/updateroomprice net::ERR_FAILED
Aniket
  • 31
  • 1
  • 5
  • https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9 – Ritik Banger Sep 12 '22 at 07:20
  • you need CORS response headers from your server running on `http://localhost:8080` – Jaromanda X Sep 12 '22 at 07:25
  • Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) – derpirscher Sep 12 '22 at 07:28

0 Answers0