React - Send param using axios to back-end-CodePudding

I am working on a project with various get methods. one of the methods is a get a coupon by maximum price which required a param to be send from server.

Get Method from backend:

 @GetMapping("coupon/{price}")
    @ResponseStatus(HttpStatus.ACCEPTED)
    public List<Coupon> getCustomerCouponsByMaxPrice(@RequestParam double price) {
        return customerService.getCustomerCouponsByMaxPrice(price);
    }

its a very simple method to get all coupons of client by maximum price entered. this method works just fine on backend.

My issue comes on my react component.

GetComponent on react side:

interface RouteParam {
    price: string;
}

interface CouponByPrice extends RouteComponentProps<RouteParam> { }

interface CouponDetailState {
    coupons: CouponModel[];
}

class GetCouponByPrice extends Component<CouponByPrice, CouponDetailState> {
    public constructor(props: CouponByPrice) {
        super(props);
        this.state = {
            coupons: null,
        };
    }

    public async componentDidMount() {
        try {
            const price =  this.props.match.params.price;
            
          
           // const coupon = store.getState().couponState.coupons.find((p) => p.price === price);
             const response = await axios.get<CouponModel[]>(globals.urls.customerCouponsByPrice   1000);
            
            this.setState({ coupons: response.data });
        } catch (err) {
            notify.error(err);
        }
    }

    public render(): JSX.Element {
        return (

            
            <div className="CatDetails Box">
                {!this.state.coupons && <EmptyView msg="No Coupons for that price" />}
                {this.state.coupons && (
                    <>
                        {" "}
                        <h2>CouponByPrice</h2>

                        <div className="top">
                            <h1>Coupon List</h1>
                        </div>/
                        <div className="card">
                            <Box m={4} pt={4} >
                                <Grid container spacing={6}
                                    direction="row"
                                    justifyContent="space-evenly"
                                    alignItems="center"
                                    style={{ minHeight: '80vh' }}
                                >
                                    {
                                        this.state.coupons.map(c => (
                                            <Grid item xs={6} sm={4} >
                                                <Card2 key={c.id} coupon={c} />
                                            </Grid>
                                        ))
                                    }
                                </Grid>
                            </Box>
                        </div>

                        <br />
                        <NavLink to="/home">Back</NavLink>
                    </>
                )}
            </div>
        );
    }
}

export default GetCouponByPrice;

Note: I gave an embedded price just to see if it works.

URL used for axios:

"http://localhost:8080/api/customer/coupon/{param}"

I am not sure of the correct syntax for this. however, when I go over code I am not sure on what exactly I am missing.

ERROR: I am getting is of 400.

Still new to this.

Thanks.

CodePudding user response：

You need to send a config object in your request, which takes a params object.

Try the following

axios({
  method: 'get',
  url: 'http://localhost:8080/api/customer/coupon/',
  params:{price:'100'}
})

See - https://axios-http.com/docs/req_config