React: passing selected row value from child component to parent

React: passing selected row value from child component to parent

Posted by: igelfenbeyn on 29 June 2020, 9:02 am EST

• 

  igelfenbeyn

  • Post Options:
  • Link
    Copy

  Posted 29 June 2020, 9:02 am EST

  Hi,
  
  i have child component with a flexgid on it and I want the parent component to know what row was selected. The problem is that when i pass property assignment function and call it from the child - it forces the grid to re-render, losing the selected row.

  parent.tsx:
  
  const [selectedRowCell, setSelectedRowCell] = useState(“”);
  
  function setSelectedRowCellFromChild(value: string): void {
  
  console.log(value);
  
  setSelectedRowCell(value);
  
  }

  ChildComponent.tsx:

  <FlexGrid itemsSource={data}
  
  selectionChanged={(s: wjGrid.FlexGrid) =>
  
  props.setSelectedPortfolioCode(s.selectedItems[0].value)
  
  }

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2020, 6:12 pm EST

  Hi Igor,

  The only other way to pass the selectedItem from the grid is to use ref. The React.useRef() method can be used to create references of the child components. You will first need to pass a reference variable from the parent to ChildComponent and then create a ref of the grid in the ChildComponent and pass to the parent variable.
  
  Please refer to the sample link below:

  https://stackblitz.com/edit/react-fsba9z

  Regards,
  
  Ashwin