I want to call the same popup with input fields when I click on edit button which is inside that popup, how can I do this (if possible)?

Question

This is my react component which is responsible for a table, I am adding images for reference of what I am trying to achieve.

const ClientsTable = (props) =>{
return(<>
         <tr>
           <td>{props.num}</td>
           <td>{props.name}</td>
           <td>{props.status}</td>
           <td><Popup trigger={<button className="btn btn-outline-info" style ={{width:'80%'}}>View</button>} modal>
               { close =>(
                          <span className ="justify-content-center">
                          <div className="card col-md-8 mx-auto infoCard">
                                    <button className="close" onClick={close}>&times;</button>
                                        <div className="card-body">
                                            <h5 className="card-title">{props.name}</h5>
                                            <h6 className="card-subtitle mb-2 text-muted">{`${props.address}, ${props.city}`}</h6>
                                            <p className="card-text">{props.ps}</p>
                                            <h6 className="card-subtitle mb-2">{`Phone: ${props.phone}`}</h6>
                                            <h6 className="card-subtitle mb-2">{`Adhar no.: ${props.adhar}`}</h6>
                                            <h6 className="card-subtitle mb-2">{`Dates: ${props.hrdates}`}</h6>
                   {/* EDIT BUTTON */}                         
                                            <button className="btn btn-info me-3" style ={{width:"100px"}}>Edit</button>
                                            <button className="btn btn-danger" style ={{width:"100px"}}>Delete</button>
                                        </div>
                                    </div>
                                    </span>
                                    )}
               </Popup>
          </td>
        </tr>
               
 </>);
}

What might be the solution? I just want to click on edit button and want to open another popup, but having input fields.

Here are screenshots for reference:

This is table:

This is popup:

Answer 1

You can create a state called edit and using condition to check what need to be rendered on the screen. Using that way you can utilize your popup. Here is the code:

function ClientsInfo(props) {
    const [edit, setEdit] = useState(false);

    return <span className ="justify-content-center">
            <div className="card col-md-8 mx-auto infoCard">
                 <button className="close" onClick={props.close}>&times;</button>
                      <div className="card-body">
                        {!edit ? 
                         <h5 className="card-title">{props.name}</h5>
                         <h6 className="card-subtitle mb-2 text-muted">{`${props.address}, ${props.city}`}</h6>
                         <p className="card-text">{props.ps}</p>
                         <h6 className="card-subtitle mb-2">{`Phone: ${props.phone}`}</h6>
                         <h6 className="card-subtitle mb-2">{`Adhar no.: ${props.adhar}`}</h6>
                         <h6 className="card-subtitle mb-2">{`Dates: ${props.hrdates}`}</h6> 
                       : (<>{/*Your Input Fields Here*/}</>) }               
                   {/* EDIT BUTTON */}                         
                         <button className="btn btn-info me-3" style ={{width:"100px"}} onClick={()=>setEdit(true)}>Edit</button>
                         <button className="btn btn-danger" style ={{width:"100px"}}>Delete</button>
                     </div>
              </div>
          </span>

}

const ClientsTable = (props) =>{
  return(<>
         <tr>
           <td>{props.num}</td>
           <td>{props.name}</td>
           <td>{props.status}</td>
           <td><Popup trigger={<button className="btn btn-outline-info" style ={{width:'80%'}}>View</button>} modal>
               { close =>(<ClientsInfo {...props, close: close}></ClientsInfo>)}
               </Popup>
          </td>
        </tr>
               
   </>);
}