Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing a State variable to another Component

Sorry new React guy here and cant for the life of me figure out this issue.

This is just the necessary code snippets of my app but Im just trying to get the contents of the clicked Datagrid row, pass to the Dialog form and then call my other component passing the row info. I get the row info no problem. It just never shows up in the props on the second component. I can pass anything else just fine to the other component (text, variable etc..) Just not the setsendRowInfo info. Any help would be apprectiated!

let [sendRowInfo, setsendRowInfo] = useState([]);


function DataTable(){
 const handleOnCellClick = (params) => {

 setOpen(true);
 name = params.row;
 setsendRowInfo = params.row;
 };
}

return (
 <div style={{ height: 700, width: "100%" }}>
   <DataGrid
    {...tableData}
    slots={{
      toolbar: CustomToolbar,
    }}      
    rows={tableData}
    columns={columns}
    pageSize={10}
    containerBackground="#fff"
    checkboxSelection
    disableRowSelectionOnClick   
    onRowClick={handleOnCellClick}
    columnVisibilityModel={{
      id: false,
    }}
   
  <Dialog open={open} onClose={handleClose}>
    <Slide direction="down" in={open} mountOnEnter unmountOnExit>
      <DialogTitle className="titleaddnew">
        <img className="logo" src={Logo} alt="logo" />
        <strong>Enter Application Info:</strong>
      </DialogTitle>
    </Slide>
    <DialogContent>
      <div>
         <MyForm send = {{setsendRowInfo}} />            
      </div>
     </DialogContent>
   </Dialog>
   ;
  </div>
 );

}
export default DataTable;

function MyForm(props) {
let [rowResults, setrowResults] = useState();

setrowResults = props.send;
console.log(setrowResults );

Tried passing the state multiple different ways to no avail .

Tags:

2

Answers


  1. 0

    Basic usage of useState is kinda different than yours.

    useState

    Possible fix :

     const handleOnCellClick = (params) => {

 setOpen(true);
 name = params.row;
 setsendRowInfo(params.row);
 };
}

    I don’t know about how you prepared props for
    but if it hasn’t any problem just pass the sendRowInfo

    <MyForm send={{sendRowInfo}} />

    depends on how you declared the send prop in MyForm it may be

    <MyForm send={sendRowInfo} />
    Login or Signup to reply.
  2. 0

    Here is a suggested solution. Comments have been added where changes are made.

        let [sendRowInfo, setsendRowInfo] = useState([]);

function DataTable() {
  const handleOnCellClick = (params) => {
    setOpen(true);
    name = params.row;
    setsendRowInfo = params.row;
  };

  return (
    <div style={{ height: 700, width: "100%" }}>
      <DataGrid
        {...tableData}
        slots={{
          toolbar: CustomToolbar,
        }}
        rows={tableData}
        columns={columns}
        pageSize={10}
        containerBackground="#fff"
        checkboxSelection
        disableRowSelectionOnClick
        onRowClick={handleOnCellClick}
        columnVisibilityModel={{
          id: false,
        }}
      />
      <Dialog open={open} onClose={handleClose}>
        <Slide direction="down" in={open} mountOnEnter unmountOnExit>
          <DialogTitle className="titleaddnew">
            <img className="logo" src={Logo} alt="logo" />
            <strong>Enter Application Info:</strong>
          </DialogTitle>
        </Slide>
        <DialogContent>
          <div>
            <MyForm send={setsendRowInfo} /> {/*Take note of the changes here*/}
          </div>
        </DialogContent>
      </Dialog>
      ;
    </div>
  );
}
export default DataTable;

    Also, take note of the little improvement on the MyForm function:

        function MyForm(props) {
  let [rowResults, setrowResults] = useState(null);

  setrowResults(props.send); // Note the changes made here. There is no equal sign when setting the setrowResults.
  console.log(rowResults);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search