Capturing Json response for POST call to a api using axion in react

Question

I have a task at work to make a POST call to an API in a reactjs UI onclick. I believe, after the POST call, the API is going to supposed to send a series of JSON objects. I am trying to capture those JSON objects in a JSON Array. I am fairly new to react and axion any help would be appreciated.

I have make post calls from my UI to dummy apis to check responses on chrome console. Current I am facing some problems with the actual API. But I am trying to get ahead on how to hold the JSON response from the API.

import React from 'react';
import './App.css';
import axios from 'axios';



class App extends React.Component{
  obj = {
    "name": "abc",
    "Street":"Legacy",
    "City":"Plano",
    "State":"Texas",
    "ZIP":75024
  };
  constructor(){
    super()
    this.state = {
      address:[]
    }
    this.handleClick=this.handleClick.bind(this)
  }


  handleClick(){
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    })
    .then((response) => {
      console.log(response);
    }, (error) => {
      console.log(error);
    });
    console.log("I am working to Validate")
  }

In my actual reactJS project I am going to be sending the JSON object which I have currently hardcoded as obj in a POST call. I will be receiving JSON Objects in the response which I want to capture in address:[]

Another duplicate candidate: [How to set state of response from axios in react](https://stackoverflow.com/q/41194866/1218980) — Emile Bergeron, Aug 13 '19 at 04:09
JavaScript !== JSON. JSON is a string representation of data in a subset of valid JavaScript. What you're using is just Object literals. The payload and response from your API call might be, at some point, transform to JSON, but it's irrelevant here since at no point you have to deal with raw JSON. — Emile Bergeron, Aug 13 '19 at 04:12
Capturing data in state is simple, just write this in your `.then` `this.setState({address:response.data})` — ravibagul91, Aug 13 '19 at 04:45
My Apologies. I am fairly new to Software Engineering and have no clue about javascript or any of it libraries and frameworks. I am still learning the lingo of the web dev. — Tusharj, Aug 19 '19 at 12:23

score 0 · Answer 1 · answered Aug 13 '19 at 05:28

 class App extends React.Component{

      constructor(){
        super();
        this.state = {
          address:[]
        }
        this.handleClick=this.handleClick.bind(this)
      }


      handleClick(){
            const obj = {
            name: "abc",
            Street:"Legacy",
            City:"Plano",
            State:"Texas",
            ZIP:75024
        };

        axios.post('https://jsonplaceholder.typicode.com/posts', obj)
        .then((response) => {
          console.log(response);

          if (response.data != null) {
              const data = response.data;
              this.setState({
                            address: data
                        });
          }

        })
        .catch(error => {
              console.log(error.data);
            });
      }

Return a "JsonResult" object from the API and then you can set the returned "JsonResult" to the "address" by using "this.setState()" method in React.

Capturing Json response for POST call to a api using axion in react

1 Answers1