Hello, I'm a beginner with React and I'm attempting to add a row in my React app when a button is clicked. I referenced this guide on how to dynamically add and remove table rows in React.js

However, I'm having trouble adapting it to my code.

I keep encountering this error:

Error: UserForm(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Module../src/index.js
D:/react_bpms1/src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,
View compiled
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
D:/react_bpms1/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:2076:18
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
D:/react_bpms1/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
D:/react_bpms1/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:75

Below is the code snippet for KPIDetails.js where the view is rendered:

<MuiThemeProvider>
  <React.Fragment>
    <Grid container>
      <Grid item xs={6} direction="row" alignItems="center">
        <table className="table table-bordered table-hover" id="tab_logic">
          <thead>
            <tr>
              <th className="text-center"> KPI</th>
              <th className="text-center"> UOM</th>
              <th className="text-center"> Base</th>
              <th className="text-center"> Target</th>
              <th className="text-center"> Target Date</th>
            </tr>
          </thead>
          <tbody>
            {this.state.rows.map((item, idx) => (
              <tr id="addr0" key={idx}>
                <td>{idx}</td>
                <td>
                  <input
                    type="text"
                    name="Kpi_Before"
                    value={this.state.rows[idx].Kpi_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    name="UOM_Before"
                    value={this.state.rows[idx].UOM_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                ...
              </tr>
            ))}
          </tbody>
        </table>
        ...
      </Grid>
    </Grid>
  </React.Fragment>
</MuiThemeProvider>;

This section shows my code for UserFormjs where all the functions are written:

export class UserForm extends Component {
  state = {
    step: 1,
    Title: "",
    Details: "",
    What: "",
    Why: "",
    How: "",
    Status: "",
    Cost: "",
    Benefits: "",
    ...
  };

  // Function to handle changing rows
  handleChangeRows = idx => e => {
    const { Kpi_Before, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [Kpi_Before]: value
    };
    this.setState({
      rows
    });
  };

  // Function to add a row
  handleAddRow = () => {
    const item = {
      KPI_Before: "",
      UOM_Before: "",
      Base_Before: "",
      Target_Before: "",
      dateTime: ""
    };
    this.setState({
      rows: [...this.state.rows, item]
    });
  };

  // Function to remove a row
  handleRemoveRow = () => {
    this.setState({
      rows: this.state.rows.slice(0, -1)
    });
  };
}

This is my index.js file:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note that this comes with some pitfalls.

serviceWorker.unregister();

I'm struggling to understand this error. Is there an alternative method to achieve creating a table row upon clicking a button?