How to get data from response.json and pass that to component? - redux

Question

I am really new to React and Redux. I have created this form
// node modules
import React, { Component } from 'react';
import { Field, reduxForm, SubmissionError } from 'redux-form';
// custom modules
import apiRequest from '../../redux/modules/apiRequests';
const renderField = ({ type, label, input, meta: { touched, error }}) => (
<div className="input-row">
<br />
<label>{label}</label>
<br />
<input {...input} type={ type }/>
{ touched && error &&
<span className="error">{ error }</span>}
</div>
)
class LocationForm extends Component {
constructor(props){
super(props)
this.state = {
address: '',
city: '',
state: ''
}
}
handleOnChange = event => {
this.setState({
[event.target.name]: event.target.value
});
}
submit = ({ address='', city='', state=''}) => {
// console.log(`state: ${this.state.address}`)
let error = {};
let isError = false;
if (address.trim() === '') {
error.address = 'Required';
isError = true;
}
if (city.trim() === '') {
error.city = 'Required';
isError = true;
}
if (state.trim() === '') {
error.state = 'Required';
isError = true;
}
if (isError) {
throw new SubmissionError(error);
} else {
console.log(this.props)
apiRequest.post(`/search`, this.state)
console.log(this.props)
this.setState({ address: '', city: '', state: ''})
}
}
render() {
return (
<form onSubmit={ this.props.handleSubmit(this.submit) }>
<Field name="address" label='Address: ' component={renderField} type="text" onChange={this.handleOnChange} />
<Field name="city" label='City: ' component={renderField} type="text" onChange={this.handleOnChange}/>
<Field name="state" label='State: ' component={renderField} type="text" onChange={this.handleOnChange}/>
<button type="submit">Submit</button>
</form>
)
}
}
LocationForm = reduxForm({
form: 'location'
})(LocationForm)
export default LocationForm;
and this is my post method in apiRequest.js
post(url, body) {
return fetch(API_URL + url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
}).then(response => console.log((response.json())))
}
I do see the response that I need from the server when I do console.log.
But I just don't understand how do I take that response/ store it in a variable/ store as a current state so, that I can pass it on to location component to show it on a screen. I do see the result as ...
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Objecthospitals: (3) [{…}, {…}, {…}]pharmacies: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]restaurants: (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]schools: (20)[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]trains: (2) [{…}, {…}]__proto__: Object
Thanks you for any suggestion on this.

Answer 1

response.json returns a Promise. I suggest you to look at Promise if you don't know much about them.
What you need to do is returning the result of response.json() and then read the data from response.
post(url, body) {
return fetch(API_URL + url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(body)
}).then(response => (response.json())).then((json) => {
console.log('Response JSON: ', json);
})
}