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

Maybe you need to render selectbox as soon as this.state.cities is populated. — lumio
– lumio, Commented Dec 28, 2017 at 11:32
@lumio options it's the let options variable, i want to pass the values to the inputs of select options, can you guide me please? — user8574331
– user8574331, Commented Dec 28, 2017 at 11:35

lumio · Accepted Answer · 2017-12-28 11:54:27Z

2

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.

edited Dec 28, 2017 at 11:54

answered Dec 28, 2017 at 11:01

lumio

7,6054 gold badges42 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user8574331 Over a year ago

Thanks it's now working, the problem it's that the select options dont show in the form. Can you please help? @lumio

lumio Over a year ago

Is your console.log working GetCitys().then? Please update your question then

user8574331 Over a year ago

It's getting all data from json but don't get the values in the select input @lumio

lumio Over a year ago

It is null until it has been loaded. React rerenders your component as soon as your state changes.

user8574331 Over a year ago

Not working the field render for select @lumio, after wait for the answer the render dont show the values.

|

Collectives™ on Stack Overflow

Cannot populate input from Axios after Call API

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related