0
I need to consume the data of a webservice to create a form interface for dynamic filling, that is, it must adapt the form structure received by the webservice and not be fixed with the questions of it.
As this is the first time I’ve touched React, I spent the last few days immersed in documentation and video lessons, and thought I’d solve the problem as follows:
- Consume the webservice data using the Axios library.
- Pass incoming data to a variable.
- Use the function
map()
to traverse this variable (which will be an Array), within my React Component. - Dynamically fill in the form interface.
Unfortunately, I don’t know what’s going wrong, if the problem is with my methodology or my code... I’ll show you the code here of the Form component, which I created to be this interface.
import React, { Component } from 'react'
import FormTitle from './form-title'
import FormTextInput from './form-text-input'
import FormDateInput from './form-date-input'
import FormStarInput from './form-star-input'
import axios from 'axios'
class Form extends Component {
constructor() {
super()
this.formInfo = (axios.get("https://coletum.com/api/graphql?query={form_structure(formId:6950){label,componentId,type,helpBlock,order,components}}&token=7s5txcu909kwc48wookgw8g00occokk")
.then(response => {
this.formInfo = response.data.data.form_structure
console.log(this.formInfo)
return this.formInfo
}).catch(err => {
console.log(err)
})
)
}
render () {
return (
<div className="container">
<div className="row">
<div className="col-12">
<FormTitle>Cadastro de Pokémon</FormTitle>
<hr/>
</div>
<div className="col-md-7">
<form>
{this.formInfo.map(i => (
<div key={i} className="form-group row">
<label className="col-sm-4 col-form-label text-label" htmlFor={i.componentId}>{i.label}</label>
<div className="col-sm-8">
<FormTextInput componentId={i.componentId} />
<small className="form-text">{i.helpBlock}</small>
</div>
</div>
))}
</form>
</div>
</div>
</div>
)
}
}
export default Form
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Considering it was the first time I dealt with React, I already consider it a small miracle that I got there.
My problem is that I can, by Xios, play the array for my attribute this.formInfo
... however, when trying to use the method map()
in this attribute, it gives an error. I would even prefer to use the for in
, instead of the map()
, but I don’t know how to go through this array with the for in
within the React rendering structure.
Can someone help me?
Thank you.
What error you get when trying to use map?
– Chance
@Justcase , he says Cannot read Property 'map' of Undefined. When I give the
console.log(this.formInfo)
, Inside the . then do get from Axios, it correctly returns me an array of 5 objects. However, it seems that he is not passing this value to the this.formInfo attribute when he is out of Axios. I cannot understand why.– BobeCampos