paketik0chaya

Ошибка в том, что вы не передаете key, но пытаетесь его установить в
renderDistrict(item, key)
У вас функция принимает 2 аргумента, а вы передаете только один здесь:
this.renderDistrict(item)

Тем не менее, так как у вас есть id ваша задача решается так:

renderDistrict(item) {
     return (
        <tr key ={item.id} className="districts">
            <td>{item.id}</td>
            <td>{item.name}</td>
        </tr>
     )
}

p.s. для продуктивного изучения react советую подтянуть знания javascript'a

Не надо с DOM напрямую работать.
Создаете в state переменную: data
Далее в componentDidMount выполняете ajax запрос и его результат записываете через this.setState({data ... })
В render методе своего компонента, в таблице делаете обход по this.state.data с помощью map / forEach / тд

Пример:

...
constructor(props) {
    super(props)
    this.state = {
      data: []
    }
}
...
componentDidMount() {
    // ваш ajax запрос
    // в success коллбэке устанавливаете новый state, из-за этого произойдет ре-рендер
    success: function(data) { this.setState(data) }
}
render() {
const { data } = this.state
...
    <table className='table table-bordered table-striped'>
        <thead>
          <tr>
            <th>name</th>
          </tr>
        </thead>
        <tbody>
          {
            data.map(item => {
              return (
                <tr key={item._id}>
                  <td>{item.name}</td>
                </tr>
              )
            })
          }
        </tbody>
      </table>
...
}