Calling Api post method on button click in React

Question

I have an event like below:

    handleDownload(e) {
    e.preventDefault();
    alert('Hi');
    let communityName = this.state['selectedCommunity'];
    let files = this.state[files];

    fetch(clientConfiguration['filesApi.local'], {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({ communityName: communityName, body: files })
    }).then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
};

I have a button as below:

    renderDownloadButton() {
    if (this.state.files && this.state.files.filter(i => i.checked).length) {
        return (
            <button id="download" styles="display: none;" onClick={this.handleDownload} >
                Download
    </button>
        );
    }
};

It fires but it is giving following error, any help please - thank you. At

let communityName = this.state['selectedCommunity'];

its giving me the error;

Can not read property state undefined

Any help please?

I am not sure about your state of the component. Please share your component code fully. — user11847513
– user11847513, Commented Oct 10, 2019 at 22:14

Jakub Kotula · Accepted Answer · 2019-10-10 22:24:50Z

1

My guess is that you need to bind your handler, but it's really hard to tell without whole component code.

handleDownload = (e) => {
    e.preventDefault();
    alert('Hi');
    let communityName = this.state['selectedCommunity'];
    let files = this.state[files];

    fetch(clientConfiguration['filesApi.local'], {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({ communityName: communityName, body: files })
    }).then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
}

answered Oct 10, 2019 at 22:24

Jakub Kotula

2411 silver badge7 bronze badges

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

3 Comments

Abdul Over a year ago

But why is it giving error in reading the state? let communityName = this.state['selectedCommunity']; and how can I pass the file name that files state to the api, any idea buddy?

Jakub Kotula Over a year ago

Because if you have function handleDownload(e) then you switch context, therefore "this" means function context. If you use arrow function then "this" means class / component context.

Abdul Over a year ago

Thanks a lot it did work for me, but the Api post is not receiving the values community name and files in the back-end

Nimantha · Accepted Answer · 2022-06-01 09:46:53Z

0

For the api post not fetching the error can be one possible case of CORS error that browser do not allow you to access other network(private and secured IP address) so you need to actually allow the proxy setting as I can see your post data don't have any proxy enabled. Here is the code I am attaching

This is the pseudo code please make changes accordingly in your fetch method:

    var targetUrl ='/downloadableReport'
        const res= fetch(targetUrl,{
            method: 'POST',
            headers: {
                        'Content-Type': "application/json; charset=utf-8",
            },
            body: JSON.stringify({
                              
                "requestData":{
                   "userName":"XXX",
                   "password":"XXXX",
                   "clientId":"XXXX",
                   "txnType":"XXXX"
                }
            })
        })
        .then(response => response.json())
        .catch(error =>{
                console.log(error)
            })

Also, you need to add setupProxy.js file (mind the name of the file should be this only) and add this code (with preferred changes)

    const proxy = require("http-proxy-middleware");
    module.exports = function(app) {
        app.use(
            proxy("/downloadableReport",{
                target:"http://192.168.1.220:8080/report/abc" ,
                changeOrigin:true
            })
        )
    };

edited Jun 1, 2022 at 9:46

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Oct 11, 2019 at 6:19

Ayushi Keshri

6907 silver badges18 bronze badges

1 Comment

Abdul Over a year ago

I changed a little bit and it is now posting one parameter that's string, but when 2nd parameter is array of strings, it not posting correctly, it is posting array of string as array of objects, any help please, below is my code for it: handleDownload = (e) => { e.preventDefault(); var formData = new FormData(); formData.append('communityname', this.state.selectedCommunity); formData.append('files', files); let url = clientConfiguration['filesApi.local']; axios({ method: 'post', url: url, data: formData }); } files here is array strings, any help please.

Collectives™ on Stack Overflow

Calling Api post method on button click in React

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related