How to pass the onClick() event to a child component from a button in the parent component in React?-CodePudding

Let's say I have two components Component1 and Component2. I have a button in Component1.

const Component1 = () => {
    return(
        <div>
        <button onClick={()=>someExportFunc()}>Export</button>
        <Component2 />
    </div>
    )
}

My Component2.jsx is something like this.

import {ChartComponent} from '@xyz/charts';

    
const Component2 = () => {
    let chartInstance = new ChartComponent();

    return (
                <ChartComponent
                id='chart1'
                ref={chart = chartInstance => chart}

                >

                </ChartComponent>
        )

}

Now the function someExportFunc() is defined inside the {ChartComponent} being imported in Component2.jsx.

Had I used the button inside Component2, it would have worked simply. As in,

import {ChartComponent} from '@xyz/charts'

    
const Component2 = () => {
    let chartInstance = new ChartComponent();

    return (
                <button onClick={()=>someExportFunc()}>Export</button>
               <ChartComponent
                id='chart1'
                ref={chart = chartInstance => chart}

                >

                </ChartComponent>
        )

}

But how can I make it work as a button in Component1?

I am guessing it has something to do with defining state of the button and then passing the state down, but I don't exactly understand how the state of a button works. onClick() should be some instantaneous boolean, isn't it? By instantaneous, I mean it would change as soon as the 'click' is over.

Edit1: Okay, so the someExportFunc() is a library function defined in my import. It makes use of the chartInstance created in Component2. It's actual use case is

<button 
   value='export'
   onClick={() => chartInstance.exportModule.export('PNG', 
       `image`)}>
        Export
      </button>

So basically I want it so that when I click the button within Component1, it sends the onClick event to my ChartComponent in Component2.

CodePudding user response：

React uses one-way data binding, meaning parent to child in this case.

If Component 2 is a child of Component 1, define the function in Component 1 and pass the function and Chart Component as props and children respectively.

Parent:

const Component1 = () => {
  const someFunc = () => {...}
  return <Component2 someFunc={someFunc}> <ChartComponent/> </Component2>
}

Child:

const Component2 = (props) => {
  props.someFunc();
  return <div> {props.children} </div>
}

CodePudding user response：

we need to pass the function as a prop to the second component.

FirstComponent

<SecondComponent { ...data } onClick={ () => manageClick() } />

in the second Component use the onClick prop on click.

SecondComponent

<button onClick={onClick}>Click</button>