How to return HTML in ReactJS?

Question

JavaScript

Hello, please help me to solve the problem.
React Component:

import React from "react";
import ReactTable from "react-table";
import matchSorter from 'match-sorter'

export default class Orders extends React.Component {
...
test = (row) => {
    let data = {orderKey: row.orderKey};
    if (this.state.startDate !== "") {
      data['from'] = this.state.startDate.toISOString()
    }
    if (this.state.endDate !== "") {
      data['to'] = this.state.endDate.toISOString()
    }

    axios.get("API", {
      params: data
    })
    .then(res => {
///////////Здесь я сделал таблицу, которую хочу вернуть в функции <b>test()</b>////////////
                           <table class="table">
                              <thead>
                                <tr>
                                  <th scope="col">First</th>
                                  <th scope="col">Last</th>
                                </tr>
                              </thead>
                              <tbody>
                                { res.data.map(trade =>
                                  <tr key={trade.id}>
                                    <td>{trade.first}</td>
                                    <td>{trade.last}</td>
                                  </tr>
                                )}
                              </tbody>
                            </table>
     })
    .catch(function (error) {
      console.log(error);
    })
///////////////////Здесь хочу вернуть таблицу////////////////
    return таблица
   }
...
render() {
    const columns = [{
                  expander: true,
                  Header: () => <strong>More</strong>,
                  width: 65,
                  Expander: ({ isExpanded, ...rest }) =>
                    <div>
                      {isExpanded
                        ? <span>&#x2299;</span>
                        : <span>&#x2295;</span>}
                    </div>,
                  style: {
                    cursor: "pointer",
                    fontSize: 25,
                    padding: "0",
                    textAlign: "center",
                    userSelect: "none"
                  }
              }, {
              Header: 'Instrument',
              accessor: 'instrument'
            }, {
              Header: 'Client Id',
              accessor: 'clientId'
            }]
return (
           <ReactTable
             data={this.state.rows}
             filterable
             defaultFilterMethod={(filter, row) => String(row[filter.id]) === filter.value}
             columns={columns}
             defaultPageSize={5}
             className="-striped -highlight"
             SubComponent={({ row }) => this.test(row)}
           />
  )
 }
}

For an illustrative example: There is a main table, in each line of which there is an opportunity to click a button (+), Props SubComponent
is responsible for the result of the response from clicking the button . How to correctly make the test() function return HTML after the response from the axios request? Thank you very much in advance.

Answer 1

You need to understand three things:
1. How asynchronous code works.
2. Why you can't make asynchronous calls in the render method.
3. That JSX(React.createElement) doesn't return html.
In your case, data loading should occur outside the component code and be initiated, for example, in componentDidMount or on click. And the component should receive data from state.