Editing Data from Row with React/Semantic UI - reactjs

Question

Still new in React and im in the middle of my practice creating table components, the task is: input, delete and edit data.
input data row is working
delete data row is working
edit data not working,
i can manage to get the value, but i can't edit it.
the code still messy too, but it works from point 1 to 2.
Here is the code. Hope you guys can point out my mistakes and maybe some tips to tidy up this code to make it more cleaner.
Thanks
//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;
}