Can I autofocus on the first field in a redux-form created using a loop?

Question

I have created a React component using redux-form and am looking to autoFocus on the first field. The fields are created by looping through an object and creating a field for each item in that object. When I use autoFocus in the JSX is autoFocuses on the last field in the form (which makes sense).

Does anyone know how I can autoFocus on the first field in the form?

Here is my component:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class BalanceForm extends Component {
  constructor(props) {
    super(props);
    this.submitForm = this.submitForm.bind(this);
    this.cancel = this.cancel.bind(this);
  }
  cancel() {
    //not relevant
  }
  submitForm(e, values) {
    //not relevant
  }
  render() {
    return (
      <div>
      {this.props.balanceFormVisible &&
        <div className="modal-background">
          <div className="modal">
            <form onSubmit={this.submitForm}>
              {Object.keys(this.props.accounts).map((key) => {
                return (
                  this.props.accounts[key].visible &&
                  <div key={this.props.accounts[key].name}>
                    <label className="form-label" htmlFor={this.props.accounts[key].name}>
                      {this.props.accounts[key].display}
                    </label>
                    <Field
                      name={this.props.accounts[key].name}
                      component="input"
                      type="number"
                      placeholder=""
                      autoFocus
                    />
                  </div>
                )
              })}
              <button type="submit">Submit</button>
              <button onClick={ this.cancel } className="cancelbtn" >Cancel</button>
            </form>
          </div>
        </div>
      }
      </div>
    );
  }
}

BalanceForm = reduxForm({form: 'balance'})(BalanceForm)

export default BalanceForm;

Thanks in advance :)

Answer 1

Solution to this was to conditionally render the form field. Thanks to Alexander Borodin for the inspiration...

{Object.keys(this.props.accounts).map((key, i) => {
                console.log(key, i)
                return (
                  this.props.accounts[key].visible &&
                  <div key={this.props.accounts[key].name}>
                    <label className="form-label" htmlFor={this.props.accounts[key].name}>
                      {this.props.accounts[key].display}
                    </label>
                    {(i === 0) ? (
                      <Field
                        name={this.props.accounts[key].name}
                        component="input"
                        type="number"
                        placeholder=""
                        autoFocus
                      />
                    ) : (
                      <Field
                        name={this.props.accounts[key].name}
                        component="input"
                        type="number"
                        placeholder=""
                      />
                    )}
                  </div>
                )
              })}