This is a beginner react question as I am learning.

I have two files hero.js and sidebar.js. There are two functions I have in hero.js that need to be accessed from buttons in sidebar.js (namely: onSave and onRestore).

How do I pass those functions down. I realize I probably need to do something like `this.onSave' but not sure how as still new to react.

hero.js

import React, { useState, useRef, useCallback } from "react";
import ReactFlow, {removeElements, addEdge,Controls, updateEdge, ReactFlowProvider,  useZoomPanHelper,} from "react-flow-renderer";
import Sidebar from './sidebar';
import localforage from 'localforage';



localforage.config({
  name: 'react-flow-docs',
  storeName: 'flows',
});

...


  const { transform } = useZoomPanHelper();

  const onSave = useCallback(() => {
    if (rfInstance) {
      const flow = rfInstance.toObject();
      localforage.setItem(flowKey, flow);
    }
  }, [rfInstance]);

  const onRestore = useCallback(() => {
    const restoreFlow = async () => {
      const flow = await localforage.getItem(flowKey);

      if (flow) {
        const [x = 0, y = 0] = flow.position;
        setElements(flow.elements || []);
        transform({ x, y, zoom: flow.zoom || 0 });
      }
    };

    restoreFlow();
  }, [setElements, transform]);



 return(
  <div className="hero_container" >
    <ReactFlowProvider>
      <div className='rowC'>
      <div className='reactflow-wrapper' style={{ height: 500, width: 1200 }} ref={reactFlowWrapper} >
          <ReactFlow
              elements={elements}
              onl oad={onLoad}
              onElementsRemove={onElementsRemove}
              onEdgeUpdate={onEdgeUpdate}
              onConnect={onConnect}
              onDragOver={onDragOver}
              onDrop={onDrop}
              deleteKeyCode={46} /* 'delete'-key */
          >
          <Controls />
          </ReactFlow>
    </div>
    <div>
      <Sidebar />
    </div>
    </div>
    </ReactFlowProvider>
  </div>
 );
};

sidebar.js

mport React from 'react';


const Sidebar = () => {
  const onDragStart = (event, nodeType) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <div className='side_controls'>
      <div className='add_node_area'>
        <h5>Add Nodes</h5>
        <div className="description">You can drag these nodes to the pane on the left.</div>
        <div className="react-flow__node-input" onDragStart={(event) => onDragStart(event, 'input')} draggable>
          Input Node
        </div>
        <div className="react-flow__node-default" onDragStart={(event) => onDragStart(event, 'default')} draggable>
          Default Node
        </div>
        <div className="react-flow__node-output" onDragStart={(event) => onDragStart(event, 'output')} draggable>
          Output Node
        </div>
      </div>
      <div className='save_restore_buttons'>
        <button onClick={onSave}>save</button>
        <button onClick={onRestore}>restore</button>
      </div>
    </div>
  );
};

export default Sidebar;

CodePudding user response：

You can access these functions inside Sidebar component by passing them as props

<Sidebar onSave={onSave} onRestore={onRestore} />

And in sidebar.js

const Sidebar = (props) => {
    const {onSave, onRestore} = props;

CodePudding user response：

Just pass it in as props from hero.js

<Sidebar onSave={onSave} onRestore={onRestore} />

then use it in sidebar.js

const Sidebar = (props) => {
   const {onSave, onRestore} = props;

   return (
      <div className='save_restore_buttons'>
        <button onClick={onSave}>save</button>
        <button onClick={onRestore}>restore</button>
      </div>
   )
}

CodePudding user response：

you should pass your functions as props to the Component that you want to use in there, and then in the destination component, you can use those functions with props.[prop-name] For more information, you can read this doc.

hero.js

<Sidebar onSave={onSave}  onRestore={onRestore}/>

Sidebar.js

<div className='save_restore_buttons'>
     <button onClick={props.onSave}>save</button>
     <button onClick={props.onRestore}>restore</button>
</div>