react: passing selected row value from child component to parent

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

  • 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<string>("");
    function setSelectedRowCellFromChild(value: string): void {
    console.log(value);
    setSelectedRowCell(value);
    }

    <ChildComponent
    setSelectedRowCellFromChild={setSelectedRowCellFromChild} />


    ChildComponent.tsx:

    <FlexGrid itemsSource={data}
    selectionChanged={(s: wjGrid.FlexGrid) =>
    props.setSelectedPortfolioCode(s.selectedItems[0].value)
    }
    ></FlexGrid>
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels