0
376
ViewsHow to send table values to another component which will be visible later in React?
I have a table and edit/delete button on that table(each row) to edit/delete corresponding row.
I want to open a popup when the edit is clicked but I want to open the popup with some parameters to show like "old value, new value" etc.
Here is my code for table and I put an EditUserPopup component at bottom.
function MainPanel(props) {
const [isEditPopupOpen, setEditPopup] = useState(true);
const deleteCustomer = async (id) => {
await service.deleteCustomerById(id);
props.refreshTableParam();
}
const editCustomer = async (id, name, surname) => {
setEditPopup(true);
//WHAT I NEED HERE ?
props.refreshTableParam();
}
return (
<>
<ReactBootStrap.Table striped bordered hover>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{props.param &&
props.param.map((item) => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td><Button className='editButton' onClick={() => editCustomer(item.id, item.firstName, item.lastName)}><FontAwesomeIcon icon={faUserEdit} /></Button></td>
<td><Button className='deleteButton' onClick={() => deleteCustomer(item.id)}><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
</tr>
))}
</tbody>
</ReactBootStrap.Table>
{
//HOW TO OPEN THAT COMPONENT WITH PARAMS
isEditPopupOpen && <EditUserPopup someParamHere={null}/>
}
</>
);
}
I am calling editCustomer() function by the button on table and I am thinking to make EditPopup somehow visible with some param, and in other component(popup's itself) I'll do some logic.
But I cannot reach the id,firstName,lastName values in popup. How can I send corresponding table row values to the popup ?
The page is this:
1 answers
Answer question0
You can create a react state and set them inside the edit function. Then you should send them as props to your pop up.
function MainPanel(props) {
const [isEditPopupOpen, setEditPopup] = useState(true);
const [customerInfo, setCustomerInfo] = useState({id: '', name: '', surname: ''})
const deleteCustomer = async (id) => {
await service.deleteCustomerById(id);
props.refreshTableParam();
}
const editCustomer = async (id, name, surname) => {
setCustomerInfo({id: id, name: name, surname: surname})
setEditPopup(true);
//WHAT I NEED HERE ?
props.refreshTableParam();
}
return (
<>
<ReactBootStrap.Table striped bordered hover>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{props.param &&
props.param.map((item) => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td><Button className='editButton' onClick={() => editCustomer(item.id, item.firstName, item.lastName)}><FontAwesomeIcon icon={faUserEdit} /></Button></td>
<td><Button className='deleteButton' onClick={() => deleteCustomer(item.id)}><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
</tr>
))}
</tbody>
</ReactBootStrap.Table>
{
//HOW TO OPEN THAT COMPONENT WITH PARAMS
isEditPopupOpen && <EditUserPopup customerInfo={customerInfo} someParamHere={null}/>
}
</>
);
}