How to pass data from a table row and pass it to another component when it renders?

Question

I have a component that shows a table and one of its columns have a field Actions which has buttons (view, edit, delete etc.). On button click, I need to render another component (component is a popup) and pass the data from the table so that it displays the data in some form which I need to further add.

I have managed to get the current data from its row by passing in onClick. I tried to use state for another component to render but it didn't work out. I'm using Semantic-UI React components to display the button with animations.

Here is the code that has the table,

const MainContent = () => {
  const [actions, setActions] = useState(false);
 
  const handleView = (rowData) => {
    console.log(rowData);
    setActions(true);
    if (actions == true) return <ParentView />;
  };

  ....
  ....

  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Button animated onClick={() => handleView(item)}>
              <Button.Content visible>View</Button.Content>
              <Button.Content hidden>
                <Icon name="eye" />
              </Button.Content>
            </Button>
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      ....
      ....
      ....
    );
  };

  return (
    <div>
     
      ....
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    ....
                    ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

Below is the component to render on button click,

import React from "react";
import Popup from "reactjs-popup";
import { Icon } from "semantic-ui-react";

const Parent = (props) => {
  return (
    <Popup trigger={<Icon link name="eye" />} modal closeOnDocumentClick>
      <h4>in parent</h4>
    </Popup>
  );
};

export default Parent;

How can I render the other component and pass data to it on button click?

Answer 1

Data can be passed to other components as props.

For example, if your component is <ParentView />, and the data you are passing is contained in the variable rowData, you can pass it as:

<ParentView dataPassedByAkhil = {rowData}/>

Then in your ParentView component,

export default function ParentView({dataPassedByAkhil}) {

console.log(dataPassedByAkhil);

Alternatively, you can accept the data as props as below

export default function ParentView(props) {

console.log(props.dataPassedByAkhil);

If you want to open and close another popup, you can pass a state just like above.

<PopupComponent open={stateSetForPopupByParent}/>

Example of popup using state.

Updated link above with how to pass data to the dialog from rows of buttons

Here is the full code:

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [valueofRow, setValueOfRow] = React.useState();

  const handleClickOpen = (value) => {
    setValueOfRow(value);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("John");
        }}
      >
        Row 1 - value is John
      </Button>
      <br />
      <br />
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("Sally");
        }}
      >
        Row 2 Value is Sally
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="edit-apartment"
      >
        <DialogTitle id="edit-apartment">Edit</DialogTitle>
        <DialogContent>
          <DialogContentText>Dialog fired using state</DialogContentText>
          <h1>{valueofRow} was clicked and passed from the row</h1>
          <TextField
            autoFocus
            margin="dense"
            id="field"
            label="some field"
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="secondary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}