Consume data and make Dynamic Form with React

Question

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.

Answer 1

You are doing the operation in the wrong place, so your render will not update after you finish the search. You need a state variable (can be the 'formInfo') and search within a life cycle hook react. Another thing is that you cannot change this variable directly, if the "render" does not continue to be called after the search is over, you need use this.setState for that reason.

Note the change in your constructor and the addition of the componentDidMount method

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(props) {
    super(props)
    this.state = {
      formInfo: []
    }
  }

  componentDidMount () {
    axios.get("https://coletum.com/api/graphql?query={form_structure(formId:6950){label,componentId,type,helpBlock,order,components}}&token=7s5txcu909kwc48wookgw8g00occokk")
      .then(response => {
        this.setState({
          formInfo: response.data.data.form_structure 
        })
        console.log(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