Question 74326 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How do I call a function which is inside a function component in React js 18? – Reactjs

I’m using a npm package called ReactDataGrid which has SelectEditor module which renders a combo box. In the editorProps, I am able to set a function which needs to be called on onChange event. This function setClientonChange needs to call another function which is nested inside a function component? How can I call it?

    import React, {useState } from 'react';
    import ReactDataGrid from '@inovua/reactdatagrid-community';

const columns = [
...

  { name: 'currency_id', groupBy: false, defaultFlex: 1, maxWidth: 150, textAlign: 'center', header: 'Currency', editor: SelectEditor, editable:true,
    editorProps: {

        dataSource: ['Dollar', 'Euro', 'Pound', 'INR'].map((element) => ({
            id: element,
            label: element
          })),

        setClientonChange(){
          //have to call setCurrencyValue() here
        }
    }
 }
];
 
    const RoomDeposit = () => {
    
     const [gridRef, setGridRef] = useState(null);
    
     const setCurrencyValue = () => {
        gridRef.current.setItemPropertyAt(2, 'amount', '20')
      }
    
    return (
    
     <ReactDataGrid
             onReady={setGridRef}
             columns={columns}
             dataSource={dataSource}
     />
    );
    }
     export default () => <RoomDeposit />
Tags:

2

Answers


  1. 0

    Really I am not able to understand the question self.

    we can execute global function from inside of function.

    Function should be declarer first then execute.

    But as per my understanding the answer can be look like this.

    import React, {useState } from 'react';
import ReactDataGrid from '@inovua/reactdatagrid-community';




const RoomDeposit = () => {

 const [gridRef, setGridRef] = useState(null);

 const setCurrencyValue = () => {
    gridRef.current.setItemPropertyAt(2, 'amount', '20')
  }

function onDropdownChange(){
 setCurrencyValue(); //You can execute from here
}

return (

 <ReactDataGrid
         onReady={setGridRef}
         columns={columns}
         dataSource={dataSource}
 />
);
}
 export default () => <RoomDeposit />
    Login or Signup to reply.
  2. 0 
    import React, { useState } from "react";
import ReactDataGrid from "@inovua/reactdatagrid-community";

const columns = (setCurrencyValue) => [
  ...{
    name: "currency_id",
    groupBy: false,
    defaultFlex: 1,
    maxWidth: 150,
    textAlign: "center",
    header: "Currency",
    editor: SelectEditor,
    editable: true,
    editorProps: {
      dataSource: ["Dollar", "Euro", "Pound", "INR"].map((element) => ({
        id: element,
        label: element,
      })),

      setClientonChange() {
        //have to call setCurrencyValue() here
        setCurrencyValue();
      },
    },
  },
];

const RoomDeposit = () => {
  const [gridRef, setGridRef] = useState(null);

  const setCurrencyValue = () => {
    gridRef.current.setItemPropertyAt(2, "amount", "20");
  };

  return (
    <ReactDataGrid
      onReady={setGridRef}
      columns={columns(setCurrencyValue)}
      dataSource={dataSource}
    />
  );
};
export default () => <RoomDeposit />;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search