how to use onClick on react-ripples? - reactjs

Question

i create component MyButton1 to use react-ripples, but when i use onClick in MyButton1, it's not working
it's working normaly if i use button tag but i want to use my component
my code :
export const Register = () => {
const postRegister = () => {
axios.post('http://localhost:3001/api/user/register', {
email: email,
username: username,
password: password,
})
.then(() => {
alert('đăng kí thành công')
})
.catch(err => alert(err));
}
const register = () => {
console.log('onClick work')
postRegister()
}
return (
<div className="login-site">
<form className='form-login'>
<h1 className='login-form-title'>Đăng Kí</h1>
<div className="form-row">
<input onChange={getEmail} type="email"
name="email" placeholder="Your Email" />
</div>
<div className="form-row">
<input value={username} onChange={getUsername} type="email"
name="email" autocomplete="off" placeholder="Tên đăng nhập" />
</div>
<div className="form-row">
<input value={password} onChange={getPassword} type="password"/>
</div>
<div className="form-button-right">
Quên mật khẩu?
</div>
<div className="form-button-center">
<div>
<MyButton1 onClick={register}>Đăng kí</MyButton1>
</div>
Đăng nhập
</div>
</form>
</div>
);
}
in MyButton1 component code:
export const MyButton1 = (props) => {
return (
<Ripples color="rgba(255,255,255,0.5)" during={650}>
<Button className='my-button-1'>{props.children}</Button>
</Ripples>
);
}

Answer 1

Your MyButton1 doesn't have an onClick props
Since the onClick handler is only available on the native HTML element, you would need to pass it down to your Button component which supposedly also have that handler already.
Something like this:
export const MyButton1 = (props) => {
return (
<Ripples color="rgba(255,255,255,0.5)" during={650}>
<Button className="my-button-1" onClick={props.onClick}>{props.children}</Button>
</Ripples>
);
};