What is the recommended way to call a function in another component when a button is clicked in React?

I m really sorry if this question is answered a thousand times before, I m really new to React, and don’t know how to describe what I want to say in correct words to search for it.

I have a canvas component (A simple HTML canvas and I am using fabric.js on top of it) and a sidebar component (Which contains quite a few buttons such as a button to change line thickness, line color etc). Now what I want is when I click on the button in the sidebar (say, change line color button), it will call a function in canvas component or anywhere else, that sets the color property to be used for canvas drawing.

IMPORTANT: After a bit of googling what I found is that React encourages self-containment, all logic for a component should be inside it. But I am trying to make a whiteboard app. There are different toolbox, menu, sidebar components – all of which affect my canvas. I was writing the code for it in plain HTML, CSS, JavaScript. But I soon realized that my code was getting too difficult to read and modify. This is where I searched for something that lets me break my HTML code into pieces for easy management – such as one HTML code for toolbox, another one for the sidebar etc. And React and similar frameworks appeared. React does the job I originally searched for – breaking my code into components. But I am not getting how to do the following in React:

```var lineColor = #000000; const canvas = document.getElementById("canvas-id"); const lineColorButton = document.getElementById("line-color-button-id"); lineColorButton.addEventListened("click", () => {lineColor = #ff0000;})```

ANOTHER IMPORTANT NOTE: I do not want to use React as it is a bit too overwhelming for me right now. I wanted to stick with simple HTML. I just wanted a solution to break my HTML code into pieces for easy management. PLEASE any type of advice would be really appreciated.

>Solution :

The parent component can contain the methods you want, and pass the function to the child component.

The following it just typed out by hand, so may contain typos…

// In the parent component:
const onEraseToolClicked = (aParam) => {
  console.log(`Erase tool with ${aParam} was clicked`)
}

// optionally memoize the function so it won't cause re-render unless a variable it uses changes
const onEraseToolClickedMemo = useCallback(onEraseToolClicked, [])

return (
  <>
    <Toolbar onEraseToolClicked={onEraseToolClickedMemo} />
  </>
)

//IN THE Toolbar.js File
function Toolbar({ onEraseToolClickedMemo }) {

  return (
    <>
      <button type='button' onClick={onEraseToolClickedMemo}>click me</button>
      <button type='button' onClick={()=>onEraseToolClickedMemo('hello')} >no click me</button>
    </>
  )
}

EDIT: You may also look into using react’s context. You can put the toolbar state and methods to set/change it’s state into the context. Then wrap your command pallet and the canvas with the context. This will make it easier to deal with a lot of state and toolbar items.