The data I get with the API this.state = {items: [] }
I'm transferring it.
Then I transfer these values to the table. But I can't get the value of the data I choose? How can I get the value of the selected row with the "Open" button I transferred to the table?
do I get the value of the data I selected when I click the edit button?
`
this.state = {
items: []
};
this.debtModalForm = this.debtModalForm.bind(this);
debtModalForm() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
render() {
return(
<div className={"animated fadeIn container-fluid"}>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify" /> Customer Debt
</CardHeader>
<CardBody>
<Table hover bordered striped responsive size="sm">
<thead>
<tr>
<th width={"10"} />
<th width={"15"}>No</th>
<th style={{ display: "none" }}>User</th>
<th style={{ display: "none" }}>Key</th>
<th style={{ display: "none" }}>CreatedUserKey</th>
<th width={"40"}>Total Debt</th>
<th width={"40"}>Received amount</th>
<th scope={"row"}>Description</th>
<th width={"20"}>Payment Date</th>
</tr>
</thead>
<tbody>
{items.map(item => (
<tr key={item.id}>
<td>
<Button
block
color="info"
onClick={this.debtModalForm}
>
{" "}
Edit
{
<Modal
isOpen={this.state.modal}
toggle={this.debtModalForm}
backdrop={"static"}
>
<ModalHeader toggle={this.debtModalForm}>
{this.props.customerInfo.customer.ID} number customer
</ModalHeader>
<ModalBody>
<Row>
<Col xs="2">TotalDebt</Col>
<Col xs="6">
<Input
type={"text"}
placeholder={"Total Debt"}
name={"totalDebt"}
defaultValue={item.totalDebt}
//value={this.state.items.totalDebt}
onChange={this.handleChange}
/>
</Col>
</Row>
<Row>
<Col xs="2">ReceivedAmount</Col>
<Col xs="6">
<Input
type={"text"}
placeholder={"ReceivedAmount"}
name={"receivedAmount"}
onChange={this.handleChange}
/>
</Col>
</Row>
<Row>
<Col xs="2">Description</Col>
<Col xs="6">
<Input
type={"textarea"}
name={"description"}
defaultValue={item.description}
rows={"2"}
onChange={this.handleChange}
/>
</Col>
</Row>
<Row>
<Col xs="2">Payment Date</Col>
<Col xs="6">
<Input
type={"date"}
name={"paymentDate"}
defaultValue={item.paymentDate}
onChange={this.handleChange}
/>
</Col>
</Row>
</ModalBody>
<ModalFooter>
<Button
color="primary"
onClick={this.handleSubmit}
> Kaydet
</Button>{" "}
<Button
color="secondary"
onClick={this.debtModalForm}
> Close
</Button>
</ModalFooter>
</Modal>
}
</Button>
</td>
<td>{item.id}</td>
<td style={{ display: "none" }}>{item.user}</td>
<td style={{ display: "none" }}>{item.debtKey}</td>
<td style={{ display: "none" }}>
{item.createduserKey}
</td>
<td>{item.totalDebt}</td>
<td>{item.receivedAmount}</td>
<td>{item.description}</td>
<td>{new Date(item.paymentDate).toLocaleString()}</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
)
}
`
first you are creating a modal for every row on the table and you are using this.state.modal to show it which it's shared between all the rows and will show all the modal's at once,instead, you can just have on Modal and you can pass the active selected row data on it
if want to keep the current component structure
toggleActiveItemModal = (id)=>{
this.setState({
activeItemModal : this.state.activeItemModal === id ? undefined : id
})
}
<Modal
isOpen={this.state.activeItemModal === item.id}
toggle={this.toggleActiveItemModal(item.id)}
>
...rest of the modal
</Modal>