How to display API data in a table?

Question

JavaScript

Hello. There is a problem here: you need to display the data of the apishka in the table via an Ajax request. The console outputs "Warning: validateDOMNesting(...):

<div className="tab-pane" id="tab2">
                            <table id="district" className="adress">
                                <thead>
                                    <tr>
                                        <th>Район</th>
                                    </tr>
                                </thead>
                                <tbody>
                                     <tr>
                                         <td></td>
                                     </tr>
                                </tbody>
                            </table>
                        </div>

Ajax code:

district(){

        let url = "http://192.168.1.155/district";

        $.ajax
        ({
            type: "GET",
            url: url,
            dataType: 'json',
            success: function(data)
                {
                    data.forEach(function (district) {
                        $("#district").append(
                            "<div class='tab-pane' id='tab2'>" +
                            "<table id='district' class='adress'>" +
                            "<thead>" +
                            "<tr>" +
                            "<th>Район" + "</th>" +
                            "</tr>" +
                            "</thead>" +
                            "<tbody>" +
                            "<tr>" +
                            "<td>" + district.name + "</td>" +
                            "</tr>" +
                            "</tbody>" +
                            "</table>" +
                            "</div>"
                        )

                    })
                        },
       });
   }

Answer 1

It is not necessary to work with DOM directly.
Create a variable in the state: data
Next, in componentDidMount , execute an ajax request and write its result through this.setState({data ... })
In the render method of your component, in the table, traverse by this.state.datausing map / forEach / etc.
Example:

...
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>
...
}