I try to update the state for the input, but the input is losing focus on every key-strike. So i can only enter one character at time. I guess it has something todo with the rerender of the component?

The state updates but only one character at time.

```
import React, { useState } from 'react'

const InitialState = [
  {
    Id: 1,
    Server: 'server-1',
    IpAdress: '151.222.33.2'
  },
  {
    Id: 2,
    Server: 'server-2',
    IpAdress: '152.332.22.1'
  }
]

const Grid = props => {
  const [data, setData] = useState(InitialState)

  const getKeys = () => {
    return Object.keys(data[0])
  }

  const renderHeader = () => {
    return (
      <tr>
        {getKeys().map(key => {
          return <th>{key}</th>
        })}
      </tr>
    )
  }

  const getRowsData = () => {
    var items = data
    var keys = getKeys()
    return items.map((row, index) => {
      return (
        <tr key={index} data-row={index}>
          <RenderRow key={index} data={row} keys={keys} rowIndex={index} />
        </tr>
      )
    })
  }

  const RenderRow = props => {
    console.log()
    return props.keys.map((key, index) => {
      return (
        <td>
          <input
            data-index={index}
            data-key={key}
            data-row={props.rowIndex}
            value={data[props.rowIndex][key]}
            type='text'
            onChange={event => updateData(props, event, props.rowIndex, key)}
          />
        </td>
      )
    })
  }

  const updateData = (props, event, rowIndex, key) => {
    let update = [...data]
    update[rowIndex][key] = event.target.value
    setData(update)
  }

  return (
    <table>
      {renderHeader()}
      {getRowsData()}
    </table>
  )
}

export default Grid

```

Anyone have an idea whats wrong in my code?

Thanks!!