Question: I have a component that renders multiple text-fields. My state contains the information about all the text-fields I have in the component.

My state looks something like this,

```
this.state.list = [
    {
        id: "some-string",
        name: "something"
    },
    {
        id: "some-other-string-id",
        name: "some name"
    }
]

```

And handler function looks like this,

```
public handleChange(event: any) {

    var index = this.state.list.findIndex((elem) => {
        return elem.id === event.target.id;
    });

    var state = this.state;
    state.list[index].name = event.target.value;

    this.setState(state);
}

```

Rendering,

```
{this.state.list.map((list, i) => {
    <TextField
        id={list.id}
        value={list.name}
        onChange={this.handleChange}
    />
}

```

It works fine except that it de-selects the text field each time I make a change. How can I avoid that?

Answer: 
```
import React from "react";
import PropTypes from "prop-types";
import { TextField } from "material-ui";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      list: [
        {
          id: "some-string",
          name: "something"
        },
        {
          id: "some-other-string-id",
          name: "some name"
        }
      ]
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e, index) {
    const list = [...this.state.list];
    list[index].name = e.target.value;
    this.setState({ list });
  }

  render() {
    return (
      <div>
        {this.state.list.map((list, i) => (
          <TextField
            id={list.id}
            value={list.name}
            onChange={e => this.handleChange(e, i)}
          />
        ))}
      </div>
    );
  }
}

export default App;

```
```
   class TextFields extends Component {
   constructor() {
       super();
       this.state = {
           list: [
               {
                   id: "one",
                   name: "First Field",
                   autofocus: false,
               },
               {
                id: "two",
                name: "Second Field",
                autofocus: false,
            },
            {
                id: "three",
                name: "Third Field"
            }
           ]
       }
       this.onChange = this.onChange.bind(this);
   }

   onChange(event) {
       var index = this.state.list.findIndex(elem => {
           return elem.id === event.target.id
       });

       var state = this.state;
       state.list[index].name = event.target.value;
       state.list[index].autofocus = true;

       this.setState(state);
   }

   render () {
    return <div>{this.state.list.map((list, i) => {
        return <TextField 
        id={list.id}
        value={list.name}
        onChange={this.onChange}/>  
    })} </div>
   }
}

```