Cannot populate input from Axios after Call API

Question

render form to input values:

return (

handleSubmit will check if the form is valid and ready to be submit, it call the callback function // that is in our case, the onSubmit()

    The name property specifies what piece of state is being edited
                  <Field
                      label="Email"
                      type="email"
                      name="Email"
                      component={this.renderField}
                  />

            <Field name="city" 
                label="Cidade"
                value={this.state.value}
                onChange={this.handleChange}
                options={options}                                  
                component="select">               
                        </Field>

                  <Field
                      label="Password"
                      type="password"
                      name="password"
                      component={this.renderField}
                  />
                  <button type="submit" className="btn btn-primary">Submit</button>
                  <Link to="/register" className="btn btn-danger">Already registered?</Link>
              </form>
          );

I'm getting the values from json but the field it's empty

Answer 1

Your initial state might not be set, so this.state.cities is actually empty.

Do something like this in your render function:

render() {
  const options = ( this.state.cities || [] ).map( (city) => ( {
      value: city.name,
      label: city.id
  } );

  return (
    -- other components --

    { options.length ? (
        <Field name="city"
            label="Cidade"
            value={this.state.value}
            onChange={this.handleChange}
            options={options}
            component="select"
        />
      ) : null }

    -- other components --
  );
}

( this.state.cities || [] ) will check if this.state.cities is available, otherwise it uses an empty array.

---

A little more detail: Your axios call is asynchronous. That means, that React doesn't wait for axios to fetch your data but instead just tries to render something.

Your state has not been set (probably) and therefore you get this error.