React에서 편집 가능한 테이블 만들기

import React from 'react';

export default class DynamicTable extends React.Component {
  // Class constructor
  constructor(props) {
    super(props);

    this.state = { Name: '', Data: [] }
  }

  // An action event on updated data
  UpdateData(event) {
    this.setState({Name: event.target.value});
  }

  // A click action
  ClickAction() {
    var Data = this.state.Data;
    Data.push(this.state.Name);
    this.setState({Data: Data, Name: ''});
  }

  // An action event on data change
  OnDataChange(i, event) {
    var Data = this.state.Data;
    Data[i] = event.target.value;

    this.setState({Data: Data});
  }

  // An action event on data  delete
  OnDataDelete(i) {
    var Data = this.state.Data;

    Data.splice(i, 1);

    this.setState({Data: Data});
  }

  // Organizing the table
  DrawTable() {
    var context = this;

    return  this.state.Data.map(function(o, i) {
              return (
                <tr key={'item-' + i}>
                  <td>
                    <input type='text' value={o} onChange={
        context.OnDataChange.bind(context, i)}/>
                  </td>
                  <td>
                    <button onClick={context.OnDataDelete.bind(context, i)}>Delete</button>
                  </td>
                </tr>
              );
            });
  }

// Rendering the UI
    render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>{this.DrawTable()}</tbody>
        </table>
        <hr/>
        <input type='text' value={this.state.Name} onChange={this.UpdateData.bind(this)}/>
        <button onClick={this.ClickAction.bind(this)}>Add Item </button>
      </div>
    );
  }
}

// importing necessary packages and files
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';

import reportWebVitals from './reportWebVitals';
import DynamicTable from './table.js';

// Specifying the parent element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DynamicTable />
  </React.StrictMode>
);

reportWebVitals();