Question: I am coding in react js. 

We have an input form, which has text input. The text input fires an onChange function that results in a change in state (and thus rendering). 

```
var resultJSXcount = 1;
for (let i = 0; i < myArray.length; i++){
  resultJSXTable.push(
    <tr key= {resultJSXcount++}>
      <td  style = {{"paddingRight": "10px"}} > {i+1}: </td>
      <td  style = {{"paddingRight": "10px"}}> 
        <input 
          type='text' 
          id = {i}
          value = {myArray[i].name}
          onChange = {(event)  => {
            myArray[i].name = event.target.value; 
            this.props.updateState()}}
          />
      <span style={{"color":"red"}} > 
        {this.props.parentState.errorName[i]} 
      </span>
    </tr>
  ); 
}

```

This works perfect in Chrome and Internet Explorer. In Firefox, you cannot type, because the input loses focus. 

Any help is appreciated!

Answer: 
I have a guess. It's just a guess, because you do not show everything that is going on.

Your problems come from not understanding how React works. Try this:

* myArray probably comes from state or props. Use setState() to update the contents of myArray instead doing `myArray[i].name = event.target.value;` within onChange. Or if it comes from props, then use redux to update them.
* you probably use props.updateState to trigger rerendering of the component. This should not be necessary if you things described in previous point.
Sorry! I found out the problem was in a completely different area of the code. The above code worked fine. 

My error was that when I was applying my styles I had a random focus(). I am not sure why it still worked in Chrome, but crisis averted. 

Thanks for the input!