Autofocus in React JS

I had a little dynamic form in a React component I was building. The form had a meal title with an ingredient field below it. One could click add ingredient and another ingredient field would be added to the form. I wanted to make sure that the newly added field would gain focus but was a little lost.

In the state was an array of ingredients. When I clicked add ingredient I’d add a null ingredient which would cause a rerender and show the new field. I started with something like this:

addIngredientField: function(e) {
  e.preventDefault();
  var ingredients = this.state.ingredients;
  ingredients.push(this.defaultIngredient());

  this.setState({
    ingredients: ingredients
  }, this.focusIngredientField(this.state.ingredients.length - 1));
},

focusIngredientField: function(index) {
  // THIS DOESN'T WORK AS THE NODES HAVEN'T RENDERED?
  // this.refs["ingredient-name-" + index].getDOMNode.focus();
}

In the end it was easily done by setting a Autofocus property to true on the last rendered field like so, conveniently eliminating the focusIngredientField function all together. In the render method (with some variable initialization omitted).

if (isLastField) {
   focus = true;
}

<input ... autoFocus={focus} />