How 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:

Answer

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}/>
          }
    
    
        </>
      );
    }

Advertisement

Answer