Passing custom function to imported component in React - reactjs

Question

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}
onLoad={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;

Answer 1

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;

Answer 2

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>
)
}

Answer 3

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>