How to call a function in a Reusable component in React - reactjs

Question

Hi I am working on a React project in my project one button is coming soo many times. So I created one component for Button and I am reusing that component where ever I get a button. Now the problem is when I am trying to apply onClick function to that Button component, my function is not working so please help me to resolve this issue.
This is Button Component Button.js
import React from "react";
import "./Button.css";
const Button = () => {
return (
<div>
<button className="btn btn-primary">Show login button</button>
</div>
);
};
export default Button;
This is Button.css, I have written nothing in this
This is App.js
import React, { useState } from "react";
import Button from "./Button/Button";
import "./App.css";
const App = () => {
const [hideForm, setHideForm] = useState(false);
const showLoginForm = () => {
setHideForm(true);
};
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-4">
{hideForm ? (
<div className="loginform">
<form>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Enter email"
></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
></input>
</div>
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</form>
</div>
) : (
<div className="signupform">
<form>
<div className="form-group">
<label htmlFor="firstname">Firstname</label>
<input
type="text"
className="form-control"
id="firstname"
placeholder="Enter firstname"
></input>
</div>
<div className="form-group">
<label htmlFor="lastname">Lastname</label>
<input
type="text"
className="form-control"
id="lastname"
placeholder="Enter lastname"
></input>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Enter email"
></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
></input>
</div>
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</form>
</div>
)}
<div className="buttons mt-3">
<Button onClick={() => showLoginForm()}></Button>
</div>
</div>
</div>
</div>
);
};
export default App;

Answer 1

const Button = ({handleClick}) => {
return (
<div>
<button onClick={handleClick} className='btn btn-primary'>Show login button</button>
</div>
)
}
Use It like this:
<Button handleClick={()=>anyFunc()}/>
or
<Button handleclick={anyFunc}/>
``

Answer 2

You can pass the Parent's on click event to child as a props and when you click on the child component's button event that is being declared on the parent's component can be called. Here is how you can do it:
Code on the Parent Component:
const myClick =()=>{
// on click will be called here when button will be pressed
}
<Button onClick={this.myClick}></Button>
Code on the Child Component:
<button onClick={this.props.myClick}>Click Here</button>