Post request in React with multiple parameters

Question

I'm fairly new to React development. In the shopping application that I'm developing, I'm trying to send a post request through a button to my rest services to add a product to the cart. I've added the axios library to perform this. Since all the online tutorials get the info to the requests through forms I was wondering how do I collect the information I got from an earlier get request and send it back as a post request to another data table. The following is my approach which does not work.

 <button onClick={this.add.bind(this,this.state.groups.map(group => <div key={group.id}>{group.name}</div> ))} className="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4"> </button>

the post request config method looks something like this

add() { axios({ method: 'post', url: '/api/cart', body: { productid: '', productname: '' } }); }

Please help me in figuring this out. Thanks in advance.

What is this.state.groups? Are you trying to render buttons in loop based on no of groups? — Hemadri Dasari
– Hemadri Dasari, Commented Feb 23, 2019 at 7:00
Groups is the array in which the earlier get request is stored in — Shenal Burkey
– Shenal Burkey, Commented Feb 23, 2019 at 7:02
You didn’t answer my question what are you trying to achieve with following code ? {this.add.bind(this,this.state.groups.map(group => <div key={group.id}>{group.name}</div> ))} — Hemadri Dasari
– Hemadri Dasari, Commented Feb 23, 2019 at 7:07
I’m trying to collect the productid and productname of the get request from my product table which I got earlier and send it to the cart table as a post request. It’s an “Add to Cart” button — Shenal Burkey
– Shenal Burkey, Commented Feb 23, 2019 at 7:10

Hemadri Dasari · Accepted Answer · 2019-02-23 08:04:14Z

I think you are trying to render set of buttons in loop based of no of groups

Render button in loop
Pass group id and name to add function as parameters
Never do function binding directly in render, instead do always in constructor

Bind it manually in constructor

 constructor(props){ super(props){ this.add = this.add.bind(this); } }

Iterate groups and render buttons like below

{this.state.groups.map(group => <button key={group.id} onClick={() => this.add(group.id, group.name)} className="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">Add to Cart</button> )}

Now your add function should look like below

add(id, name) { axios({ method: 'post', url: '/api/cart', body: { productid: id, productname: name } }); }

Nisfan · Accepted Answer · 2019-02-23 08:20:42Z

0

This should work .

answered Feb 23, 2019 at 8:20

Nisfan

7466 silver badges10 bronze badges

Comments

Shenal Burkey · Accepted Answer · 2019-02-24 05:39:44Z

This is my rest server implementation

@PostMapping("/cart") public Cart create(String productName, @RequestBody Map<String, String> body){ String productid = body.get("productid"); String productname=("productname"); return cartRepository.save(new Cart(productid,productname)); }

Collectives™ on Stack Overflow

Post request in React with multiple parameters

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related