Редактирование данных из строки с помощью React / Semantic UI

Question

Все еще новичок в React, и я нахожусь в середине моей практики по созданию компонентов таблицы. Задача: ввод, удаление и редактирование данных.

1. работает строка ввода данных
2. строка удаления данных работает
3. редактирование данных не работает,

Мне удается получить значение, но я не могу его отредактировать.код все еще грязный, но он работает с пункта 1 до 2. Вот код.Надеюсь, вы, ребята, можете указать на мои ошибки и, возможно, несколько советов, чтобы привести этот код в порядок, чтобы сделать его более понятным.

Спасибо

//Table.js//

import React, { Component } from 'react'
import { Table, Icon, Button, Modal, Form } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css'
import { DateInput } from 'semantic-ui-calendar-react'
import './Tables.css'

var database = [
                    {
                      DocNum: 123,
                      DocTyp: 'Permit',
                      DocName: 'Permit A',
                      SignDate: '2007-11-05',
                      ExprDate: '2012-11-05'
                    },
                    {
                      DocNum: 456,
                      DocTyp: 'Permit',
                      DocName: 'Permit C',
                      SignDate: '2010-02-11',
                      ExprDate: '2015-02-11'
                    },
                    {
                      DocNum: 789,
                      DocTyp: 'Contract',
                      DocName: 'Contract Z',
                      SignDate: '2017-06-08',
                      ExprDate: '2022-06-08'
                    }
                  ]


const options = [
  { key: 1, text: 'Permit', value: 'Permit' },
  { key: 2, text: 'Contract', value: 'Contract' },
  ]


const initialState = {  open: false,
                        open2: false,
                        open3: false,
                        open4: false,
                        DocNum: '',
                        DocTyp: '',
                        DocName: '',
                        SignDate: '',
                        ExprDate: '',
                        del:'',
                        edit:''
                        }



function Addbtn ({ onShow3 }) {

    return(
    <Button content='Add Document' icon='plus' labelPosition='left' color="green" onClick={onShow3} />
    )
}

function InputData ({ onChange, onSubmit, DataInput}) {
  return (
  <Form className="InputContainer">
    <Form.Input label="Document Number" type="text" name="DocNum" onChange={onChange} />
    <Form.Select label="Document Type" type="text" name="DocTyp" onChange={onChange} options={options} />
    <Form.Input label="Document Name" type="text" name="DocName" onChange={onChange} />
    <DateInput label="Signed Date" name="SignDate" onChange={onChange} value={DataInput[0].SignDate}/>
    <DateInput label="Expired Date" name="ExprDate" onChange={onChange} value={DataInput[0].ExprDate}/>
  </Form>
  )
}
function EditData ({ onChange, onSubmit, DataEdit }) {
  return (
  <Form className="InputContainer">
    <Form.Input label="Document Number" type="text" name="DocNum" onChange={onChange} value={DataEdit.DocNum}/>
    <Form.Select label="Document Type" type="text" name="DocTyp" onChange={onChange} options={options} value={DataEdit.DocTyp} />
    <Form.Input label="Document Name" type="text" name="DocName" onChange={onChange} value={DataEdit.DocName} />
    <DateInput label="Signed Date" name="SignDate" onChange={onChange} value={DataEdit.SignDate}/>
    <DateInput label="Expired Date" name="ExprDate" onChange={onChange} value={DataEdit.ExprDate}/>
  </Form>
  )
}

function RowData(props) {
  const database = props.database
  const RowList = database.map((data)=>
    <Table.Row key={data.DocNum}>
     <Table.Cell>{data.DocNum}</Table.Cell>
     <Table.Cell>{data.DocTyp}</Table.Cell>
     <Table.Cell>{data.DocName}</Table.Cell>
     <Table.Cell>{data.SignDate}</Table.Cell>
     <Table.Cell>{data.ExprDate}</Table.Cell>
     <Table.Cell className="icon" collapsing>
              <Icon color='yellow'
                    name='edit'
                    link 
                    onClick={()=>props.onShow(data)}
                    />
               <Icon color='red'
                    name='trash'
                    link
                    key={data.DocNum} 
                    onClick={()=>props.onShow2(data)}

                    />
            </Table.Cell>
    </Table.Row>

     )
  return RowList
}

class TableComponent extends Component{
   state = initialState

show = (data) => {
  this.setState({ open: true,
                  edit: data })
}
show2 = (data) => {
  this.setState({ open2: true,
                  del: data })
}
show3 = () => {
  this.setState({ open3: true })
}
show4 = (data) => {
  this.setState({ open4: true })
  this.close()
}
close = () => {
  this.setState({ open: false })
}
close2 = () => {
  this.setState({ open2: false })
}
close3 = () => {
  this.setState({ open3: false })
}
close4 = () => {
  this.setState({ open4: false })
}
InputChange = (e, DataInput) => {
 this.setState({ [DataInput.name]: DataInput.value })
}
SearchDel = () =>{
  for(let i=0; i<database.length; i++){
      if (this.state.del === database[i])
        return database.splice(i, 1)}
}
DelData = () =>{
  return (  this.SearchDel(),
            this.close2())
  }
Submit = (data) => {
    return (database.push(data),
            this.close3())
}

  render(){

    return(
    <div className='MainContainer'>
    <div className="TblContainer">
    <div className="AddButton">
      <Addbtn onShow3={this.show3}/>
    </div>
      <Table color="red" celled >
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell collapsing>Document Number</Table.HeaderCell>
            <Table.HeaderCell width={2}>Document Type</Table.HeaderCell>
            <Table.HeaderCell width={6}>Document Name</Table.HeaderCell>
            <Table.HeaderCell collapsing>Signed Date</Table.HeaderCell>
            <Table.HeaderCell collapsing>Expired Date</Table.HeaderCell>
            <Table.HeaderCell collapsing />
          </Table.Row>
        </Table.Header>

        <Table.Body>
            <RowData database={database} onShow={this.show} onShow2={this.show2} />
        </Table.Body>
      </Table>

       <Modal open={this.state.open} onClose={this.state.close} id="Modal1">
         <Modal.Header>Edit Data</Modal.Header>
          <Modal.Content>
            <p>Are you sure you want to edit this?</p>
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.close}>No</Button>
            <Button positive onClick={this.show4}>Yes</Button>
          </Modal.Actions>
          </Modal>
        <Modal open={this.state.open2} onClose={this.state.close2} value={this.state} id="Modal2">
         <Modal.Header>Delete Data</Modal.Header>
          <Modal.Content>
            <p>Are you sure you want to delete this?</p>
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.close2}>No</Button>
            <Button positive onClick={()=>this.DelData()}>Yes</Button>
          </Modal.Actions>
          </Modal>
           <Modal open={this.state.open3} onClose={this.state.close3} id="Modal3">
         <Modal.Header>Inputing Data</Modal.Header>
          <Modal.Content>
           <InputData   onChange={this.InputChange}
                        onSubmit={this.Submit}
                        DataInput={[this.state]} />
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.close3}>No</Button>
            <Button positive onClick={()=>this.Submit(this.state)}>Submit</Button>
          </Modal.Actions>
          </Modal>
          <Modal open={this.state.open4} onClose={this.state.close4} id="Modal4">
         <Modal.Header>Editing Data</Modal.Header>
          <Modal.Content>
           <EditData    onChange={this.InputChange}
                        onSubmit={this.Submit}
                        DataEdit={this.state.edit} />
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.close4}>No</Button>
            <Button positive onClick={()=>this.Submit(this.state)}>Submit</Button>
          </Modal.Actions>
          </Modal>
        </div>
      </div>
    )
  }
}

export default TableComponent

//Table.css//
.TblContainer{
        margin: 100px;
}

.AddButton{
    display: flex;
    justify-content: flex-end;
}