CODEWITHSUNDEEP
node.jsreactjs
Saba
Saba

Reputation: 11

Get response via axios api and display it as DOM element on frontend

I am new to react js as well as node &express js. I just want to know a simple thing, If I have used the axios API for simply getting the response from backend via res.send() function and I want to display a div tag saying " backend responds" at the end of my submit button on the frontend in case I get a response from the backend.

I created a react component called Block which returned div tag but how to call that component after button that too when a response has arrived is a mystery to me.

Check out the screenshot of the code 1

Upvotes: 0

Views: 1551

Answers (1)

Meera Datey
Meera Datey

Reputation: 2020

You can use state to save the response received from Axios. Remember, you got to use response.data to retrieve data.

const submitReview = () => {
    // Getting around CORS problem  using cors-anywhere
    Axios.get(
      "your url here"
    ).then((response) => {
      // You got to get 'data' from response.data

      console.log(response.data);
      setReview(response);
    });
  };

And in your render loop - check if you have successfully received response. I have used length of variable. You can use a boolean variable such as 'loaded' to indicate that you already have received the response.

 <button onClick={submitReview}> Submit </button>
      {review.length > 0 ? review : ""}

Check out complete example here

https://codesandbox.io/s/get-response-via-axios-api-and-display-it-as-dom-element-on-frontend-st0ht?file=/src/App.js:349-798

Upvotes: 1

Related Questions